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

Question

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

我需要使用 jQuery 在数字“3”周围包裹一个 HTML 元素。我无法修改 HTML，因为它是动态生成的。

Answer 1

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

$(function() {

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

});​

wrap()只是对and有一点困惑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>");