Question

我需要在带有span的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">之前的标签）

见工作demo

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>')

在元素中换行文本

6 个答案: