Jquery Next / NextAll / NextUntil具有计数限制

时间:2013-10-08 09:45:48

标签: jquery siblings

我真的很烦我,我不知道答案,我觉得这很简单。我想将选定元素中的下一个和前一个元素设置为限制(例如2)。这是一个例子:

<ul>
<li>link 1</li>
<li>link 2</li>
<li>link 3</li>
<li>link 4</li>
<li class='active'>link 1</li>
<li>link 6</li>
<li>link 7</li>
<li>link 8</li>
<li>link 9</li>
</ul>

所以我想选择之前的两个元素和活动li之后的2个元素。我尝试过这样的事情: $('li.active').nextAll(':eq(2)');然后使用prevAll将其添加到同一个{{1}},但它选择一个元素2个兄弟姐妹而不是整个组。

必须有一种简单的方法可以做到这一点,我错过了,有什么建议吗?

N.B。我无法编辑HTML,它是动态生成的。

2 个答案:

答案 0 :(得分:5)

这个问题有(至少)两种方法。您可以将prevAll()nextAll()链接到slice(),然后使用add()将这两组合并:

var $active = $("li.active");
var $around = $active.prevAll().slice(0, 2)
                     .add($active.nextAll().slice(0, 2));

或者您可以获取活动元素的index(),使用slice()获取该索引周围的兄弟,然后使用not()过滤掉活动元素:

var $active = $("li.active");
var activeIndex = $active.index();
var $around = $active.siblings().addBack()
                     .slice(Math.max(0, activeIndex - 2), activeIndex + 3)
                     .not($active);

答案 1 :(得分:4)

您可以将nextAllprevAllless-than :lt(index)选择器结合使用 (在你的情况下:lt(2)

var current = $('.active'),
    next = current.nextAll(':lt(2)'),
    prev = current.prevAll(':lt(2)'),
    all = current.add(next).add(prev);