使用jQuery在分页文本周围包裹一个跨度

Question

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

有人可以提供一个jquery解决方案来在<span></span>处于活动状态和最后一个分页处于活动状态（即'7'）时将其包裹在'5'周围吗？

1. 活动页面将根据选择的数量增加/减少，因此它不一定总是为“ 5”和需要跨度的“ 7”。
2. jQuery不应触摸同一div块中存在的摘要“ xx条记录/每页xx条记录/ x页”。
3. 单击最后一个分页（即7）时，将删除人字形，并且活动编号在摘要旁边。 这种孤立的分页将需要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>');
  }
});

检查小提琴