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.

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

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