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

Mik*_*ram 6 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>
Run Code Online (Sandbox Code Playgroud)

所以我想先选择两个元素,然后选择活动后的2个元素li.我尝试过做类似的事情: $('li.active').nextAll(':eq(2)');然后将它添加到同一个使用prevAll但是它选择一个元素2个兄弟姐妹而不是整个组.

必须有一个简单的方法,我错过了任何建议?

NB我无法编辑HTML,它是动态生成的.

Fré*_*idi 5

有(至少)两种方法来解决这个问题.您可以将prevAll()nextAll()链接slice(),然后使用add()组合这两个集合:

var $active = $("li.active");
var $around = $active.prevAll().slice(0, 2)
                     .add($active.nextAll().slice(0, 2));
Run Code Online (Sandbox Code Playgroud)

或者你可以获取活动元素的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);
Run Code Online (Sandbox Code Playgroud)

  • 我通过 jsPerf 提出了所有这些想法,有趣的是使用 .prevAll().slice(0, 2) 是最快的:http://jsperf.com/selecting-limited-elements (2认同)