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.
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);
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With