Jquery Next/NextAll/NextUntil with count limit

Question

Its really annoying me that I don't know the answer to this, I thought it would be simple. I want to get the next and previous elements from a selected element to a limit (say 2). Here is an example:

<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>

So I want to select two elements before and 2 elements after the active li. I have tried doing something like: $('li.active').nextAll(':eq(2)'); and then adding it to the same using prevAll but it selects one element 2 siblings away instead of the whole group.

There must be an easy way of doing this that I have missed, any suggestions?

N.B. I cant edit the HTML, it is generated dynamically.

Whited

Iv managed to do it with the following: .nextAll(':eq(0), :eq(1)'); this seems untidy, surely there is a better way? – Whited

Answer 1

There are (at least) two approaches to this problem. You can chain prevAll() and nextAll() into slice(), then use add() to combine the two sets:

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

Or you can fetch the index() of the active element, use slice() to get siblings around that index, then filter the active element out with not():

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

Rotenone

Thanks for providing alternatives, I dont think either of these are as quick or concise as using .nextAll(':eq(0), :eq(1)'); it surprises me there is not an easier way to do this however. – Whited

I put all these ideas through jsPerf and interestingly using .prevAll().slice(0, 2) was the quickest: jsperf.com/selecting-limited-elements – Whited

Answer 2

You can use nextAll and prevAll combined with the less-than :lt(index) selector
(in your case :lt(2))

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

Anthropophagy

Good thought, thanks for the suggestion. Take a look: jsperf.com/selecting-limited-elements – Whited

Yes, performance is discussed in the Additional Notes section of the documentation of the :lt selector.. (but for casual in-page use) it is not really an issue. – Anthropophagy