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" />');

JSfiddle

多个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>');
    }
});

该$.trim部分是必需的，因为用于缩进 html 代码的选项卡也是我们必须过滤掉的文本节点（例如，作为之前的选项卡<span class="count">）

查看工作演示

Answer 5

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

Answer 6

如果您需要将文本内容包装在元素中，请使用wrapInner

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

示例 html

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

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