Anzeige nur am nächsten Listenelement

Question

Hier ist an example of what I have already

Die Hauptfunktionalität funktioniert, aber jetzt brauche ich die Controller-Liste kleiner zu machen, so dass es auf den Bildschirm paßt besser, als es positioniert hat geregelt.

Also, ich denke, es sollte die nächsten drei Listen-Elemente von aktiven Element und 2 vorherigen zeigen.

So etwas wie dies funktionieren würde, aber ich denke, es sollte kürzer und convinient Weg:

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

Irgendwelche Tipps für den Wieder Factoring aktuellen Code für eine bessere Performance als auch hilfreich sein würde.

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 zur Verwendung der Dokumentation next()

Diese alle Einzelteile können Sie für tree-traversal

Answer 2

Verwenden Sie die folgende jQuery-Funktion verwenden.

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

Jquery Funktion ist ..

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

Answer 3

Sie versuchen .end() verwenden könnte, um auf Verfahrgeschwindigkeit zu sparen:

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