6

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.

Gabriele Petrioli
  • 191,379
  • 34
  • 261
  • 317
Mike Oram
  • 765
  • 8
  • 21
  • Iv managed to do it with the following: .nextAll(':eq(0), :eq(1)'); this seems untidy, surely there is a better way? – Mike Oram Oct 08 '13 at 09:52

2 Answers2

5

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);
Frédéric Hamidi
  • 258,201
  • 41
  • 486
  • 479
  • 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. – Mike Oram Oct 08 '13 at 10:12
  • 2
    I put all these ideas through jsPerf and interestingly using .prevAll().slice(0, 2) was the quickest: http://jsperf.com/selecting-limited-elements – Mike Oram Oct 08 '13 at 10:26
4

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);
Gabriele Petrioli
  • 191,379
  • 34
  • 261
  • 317
  • Good thought, thanks for the suggestion. Take a look: http://jsperf.com/selecting-limited-elements – Mike Oram Oct 08 '13 at 10:27
  • 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. – Gabriele Petrioli Oct 08 '13 at 11:45