1

由于我们的 CMS，我有这个我无法编辑的 HTML 结构，正如您所见，它缺少一个类/跨度，因此很难设置活动页面的样式，即“5”。同时，当最后一个分页处于活动状态时，结束人字形被删除，即“7”。

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

  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">‹‹&lt;/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">››&lt;/a>
    xx records / xx records per page / x pages 
</div>

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

<div class="pag">
    <a class="prev" href="http://www.example.com">‹‹&lt;/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/

4

2 回答 2

3

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

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

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

这是演示：

http://jsfiddle.net/36Wwt/

于 2013-01-11T02:23:48.160 回答
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>');
  }
});

检查小提琴

于 2013-01-11T02:37:38.267 回答