Visualizzare solo gli elementi della lista più vicini

Question

Ecco an example of what I have already

Le opere principali funzionalità, ma ora ho bisogno di fare l'elenco di controllo più piccoli, in modo che si adatti meglio allo schermo, come è fisso posto.

Quindi, penso che dovrebbe mostrare le prossime tre voci di elenco da articolo attivo e 2 precedenti.

Qualcosa di simile potrebbe funzionare, ma penso che ci dovrebbe essere il modo più breve e più comoda:

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

Eventuali suggerimenti per il re-factoring codice corrente per ottenere prestazioni migliori sarebbe utile pure.

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 per la documentazione next()

Questo tutti gli elementi che è possibile utilizzare per tree-traversal

Answer 2

utilizzare la seguente funzione 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> 

funzione di jQuery è ..

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

Answer 3

Si potrebbe provare a utilizzare .end(), al fine di risparmiare sui traslazione:

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