使用 jquery 在分页文本周围环绕一个跨度

Question

由于我们的 CMS，我无法编辑此 HTML 结构，并且您可以看到它缺少一个类/跨度，因此很难设置活动页面的样式，即“5”。同时，当最后一个分页处于活动状态时，即 '7' 会删除结尾的 V 形。

有人可以提供一个 jquery 解决方案，在 <span></span> 处于活动状态时以及最后一个分页处于活动状态时（即“7”）将其包裹在“5”周围，所以我可以设置它的样式吗？

1. 活动页面将根据所选数字增加/减少，因此它并不总是需要跨度的“5”和“7”。
2. jquery 不应触及同一 div 块中存在的摘要“xx 条记录/每页 xx 条记录/x 页”。
3. 单击最后一个分页，即 7 时，V 形将被删除，活动数字位于摘要旁边。这种孤立的分页需要 span 标签而不影响摘要。

这是我提供演示的小提琴：http://jsfiddle.net/evanmoore/yay9W/

示例 1：

<div class="pag">
    <a class="prev" href="http://www.example.com">‹‹</a>
    <a href="http://www.example.com">1</a>
    <a href="http://www.example.com">2</a>
    <a href="http://www.example.com">3</a>
    <a href="http://www.example.com">4</a>
    5
    <a href="http://www.example.com">6</a>
    <a href="http://www.example.com">7</a>
    <a class="prev" href="http://www.example.com">››</a>
    xx records / xx records per page / x pages 
</div>

示例 2：如果最后一个分页处于活动状态，在本例中为 7，则 html 如下所示：

<div class="pag">
    <a class="prev" href="http://www.example.com">‹‹</a>
    <a href="http://www.example.com">1</a>
    <a href="http://www.example.com">2</a>
    <a href="http://www.example.com">3</a>
    <a href="http://www.example.com">4</a>
    <a href="http://www.example.com">5</a>
    <a href="http://www.example.com">6</a>
    7 xx records / xx records per page / x pages 
</div>

这是我提供演示的小提琴：http://jsfiddle.net/evanmoore/bqyYA/

Answer 1

假设我们想要包装除最后一个（包含您的摘要）之外的文本节点的任何内容，这应该可以工作：

$('div.pag').contents(':not(:last-child)').filter(function() {
  return this.nodeType == 3;
})
.wrap('<span></span>')

.contents 函数类似于 .children 函数，不同之处在于它也返回文本节点。过滤器检查文本节点类型。添加的过滤器会跳过最后一个子节点。

这是演示：

http://jsfiddle.net/36Wwt/

Answer 2

这应该适用于大多数情况。

上述解决方案在很多情况下都不起作用，例如我在这里粘贴的小提琴中的标记

var elms = $('.pag').contents().filter(function () {
  return this.nodeType === 3 && $.trim(this.nodeValue) != '';
});

elms.each(function () {
  var num = Number(this.nodeValue);
  if (!isNaN(num)) {
    this.nodeValue = num;
    $(this).wrap('<span class="lonerPage"></span>');
  }
});

Check Fiddle