Pokaż tylko najbliżsi elementy listy

Question

Oto an example of what I have already

Główne prace funkcjonalność, ale teraz muszę dokonać lista kontroler mniejsze, tak aby lepiej dopasować go do ekranu, jak to naprawione ustawione.

Sądzę, że powinien pokazać następne trzy elementy listy z aktywnego elementu i 2 poprzednie.

Coś jak to będzie działać, ale myślę, że nie powinno być krótsze i bardziej wygodny sposób:

//Display closest items 
$('#historyController li.active').prevAll('li:not(.first)').hide().slice(0,2).show(); 
$('#historyController li.active').nextAll('li:not(.last)').hide().slice(0,3).show(); 

jakieś wskazówki dla ponownego faktoringu kodem bieżącym dla lepszej wydajności byłby pomocny.

Answer 1

<ul> 
    <li>list item 1</li> 
    <li>list item 2</li> 
    <li class="third-item">list item 3</li> 
    <li>list item 4</li> 
    <li>list item 5</li> 
</ul> 

$('li.third-item').next().css('background-color', 'red'); 

link do dokumentacji next()

to wszystkie elementy można wykorzystać do tree-traversal

Answer 2

korzystać z następujących funkcji jQuery.

<ul id="one" class="level-1"> 
<li class="item-i">I</li> 
<li id="ii" class="item-ii">II 
<ul class="level-2"> 
<li class="item-a">A</li> 
<li class="item-b">B 
<ul class="level-3"> 
<li class="item-1">1</li> 
<li class="item-2">2</li> 
<li class="item-3">3</li> 
</ul> 
</li> 
<li class="item-c">C</li> 
</ul> 
</li> 
<li class="item-iii">III</li> 
</ul> 

funkcja jQuery jest ..

$('li.item-a').closest('ul').css('background-color', 'red'); 

Answer 3

Mógłbyś spróbować użyć .end(), aby zapisać na przesuwającego:

$('#historyController li.active').prevAll('li:not(.first)').hide().slice(0,2).show().end().end().nextAll('li:not(.last)').hide().slice(0,3).show();