如何使用jQuery将HTML包裹在文本节点周围

Question

<div class="pagination">
  <a href="#">1</a>
  <a href="#">2</a>
  3
  <a href="#">4</a>
</div>

我需要使用 jQuery 将 HTML 元素包装在数字"3"周围。我无法修改 HTML，因为它是动态生成的。

Answer 1

我有一个类似的问题，它包装了所有杂散的文本

$(function() {
    var test = $('.pagination')
        .contents()
        .filter(function() {
            return this.nodeType === 3 && $.trim(this.nodeValue) !== '';
        })
        .wrap('<span/>');
});​

只是与wrap()和wrapAll()有轻微的混淆. 这是一个演示

Answer 2

这将

用一个跨度包装所有数字，因此结构将是：

<a><span>1</span></a>

而选定的一个只有跨度，没有：

<span>2</span>

var html = $('.pagination').html();
    html = html.replace(/[0-9]/g,"<span>$&</span>");
    $('.pagination').html(html);

因此，您可以使用以下方法轻松设置其样式：

.pagination a span {normal style} 
.pagination span{selected style}

Answer 3

这很旧，但在我看来，一种更短、更简单的方法是：

$("div:not(a)").wrapInner("<a href='#'></a>");