Envelopper le texte dans l'élément

Question

J'ai besoin d'envelopper du texte dans un div avec un span.

<div class="item">
   <span class="count"></span>
   Text that needs to be wrapped.
</div>

<div class="item">
   <span class="count"></span>
   Text that needs to be wrapped.
</div>

<div class="item">
   <span class="count"></span>
   Text that needs to be wrapped.
</div>

J'ai essayé ceci mais ça n'a pas vraiment marché...

$('.item').text().wrap('<span class="new" />');

Answer 1

Vous pouvez le faire en utilisant contenu() y .eq()

$('.item').each(function(i, v) {
    $(v).contents().eq(2).wrap('<span class="new"/>')
});

http://jsfiddle.net/qUUbW/

Answer 2

Et si

$('.item').contents().filter(function(){
    return this.nodeType == 3 && $.trim(this.nodeValue).length;
}).wrap('<span class="new" />');

http://jsfiddle.net/mowglisanu/x5eFp/3/

Answer 3

DIV unique :

var txt = $('.count')[0].nextSibling;
$(txt).wrap('<span class="new" />');

JSfiddle

DIVs multiples :

var markers = document.querySelectorAll('.count'),
    l = markers.length,
    i, txt;

for (i = l - 1; i >= 0; i--) {
    txt = markers[i].nextSibling;
    $(txt).wrap('<span class="new" />');
}

JSFiddle

Answer 4

Si vous devez envelopper du contenu textuel à l'intérieur d'un élément, utilisez wrapInner

https://api.jquery.com/wrapInner/

exemple html

<div class="item">contents inside needs to be wrapped</div>`

// jQuery
$('.item').wrapInner('<span></span>')

Answer 5

Mon avis sur la question :

$('.item').contents().each(function() {
    if (this.nodeType == 3 && $.trim(this.nodeValue) != '') {
       $(this).wrap('<span class="textwrapped"></span>');
    }
});

En $.trim est nécessaire car les tabulations utilisées pour indenter le code html sont également des nœuds de texte que nous devons filtrer (par exemple, comme la tabulation juste avant l'élément <span class="count"> )

Voir le travail Démo