jquery - 要素内でテキストを折り返す

Question

スパンで 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>

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

これを試してみましたが、実際にはうまくいきませんでした...

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

Answer 1

contents()と.eq( )を使用してそれを行うことができます

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

http://jsfiddle.net/qUUbW/

Answer 2

どうですか

$('.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 :

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

JSフィドル

複数の DIV :

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

これに対する私の見解：

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

HTMLコードをインデントするために使用されるタブは、フィルターで除外する必要があるテキストノードでもあるため、この$.trim部分が必要です（たとえば、直前のタブとして<span class="count">）

実際のデモを見る

Answer 5

要素内でテキスト コンテンツをラップする必要がある場合は、wrapInner

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

html の例

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

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

Answer 6

$('.item').html($('<span class="new">').text($(".item").text()))