Question

我有这个HTML结构，我无法编辑，因为我们的CMS，你可以看到它缺少一个类/跨度，使得很难设置活动页面的样式，即'5'。同时，当最后一个分页处于活动状态时，将移除末端V形符号，即“7”。

有人可以提供一个jquery解决方案，当{5}在活动时以及最后一个分页处于活动状态时将<span></span>包裹在'5'周围，这是'7'，所以我可以设置它吗？

活动页面将根据所选的数量增加/减少，因此并不总是为'5'和'7'需要跨度。
jquery不应触及同一div块中存在的摘要“每页xx记录/ xx记录/ x页面”。
当单击最后一个分页（即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

使用jquery在分页文本周围换行

2 个答案: