jQuery derzeit keine Listenelemente entfernen

Question

ich einen Baum mit ul haben und hat die folgende Struktur:

<div id="Tree"> 
    <ul> 
    <li> 
     <a class="collapseLink" href="#"> 
     <span class="hide">Expand Root Node</span> 
     </a> 
     <a class="selectLink" href="#"> 
     Root Node 
     </a> 
     <ul> 
     <li id="item_1">Sub Node 1</li> 
     <li id="item_2">Sub Node 2</li> 
     <li id="item_3">Sub Node 3</li> 
     <li id="item_4">Sub Node 4</li> 
     <li id="item_5">Sub Node 5</li> 
     <li id="item_6">Sub Node 6</li> 
     </ul> 
    </li> 
    </ul> 
</div> 

Ich würde am liebsten die Anzahl der Sub-Knoten im Baum zu begrenzen und versuchte, Implementieren Sie das mit den folgenden:

$(document).ready(function() { 
    var rootNode = $('#Tree ul li a:first'); 
    // If the root node has an 'expandLink' class then it's closed and can be opened //(via a click) 
    if (rootNode.hasClass('expandLink')){ 
     rootNode.click(); 
     limitRootNodes(); 
    } 
    function limitRootNodes() { 
     // Get the direct child nodes for the root list element 
     var tree_ul = $('#Tree ul li ul:first').children(); 
     // list limit 
     var max_listCount = 3; 
     // remove the last element if the list size exceeds the limit 
     while (tree_ul.size() > max_listCount){ 
      $('li:last-child', tree_ul).remove(); 
     } 
    } 
}); 

Der obige Code entfernt jedoch nicht die überschüssigen Elemente der Liste. Irgendwelche Vorschläge, was das verursacht?

Answer 1

Hier ist eine andere Möglichkeit, dies zu erreichen.Ersetzen Sie Ihre while-Schleife mit diesem:

tree_ul.each(function(n,item){ 
    if(n > (max_listCount - 1)) 
    $(item).remove(); 
}); 

EDIT: Auch in Ihrem HTML-Beispiel, der erste Anker-Tag hat Klasse collapseLink, aber dieser Code sucht die Klasse expandLink bevor die limitRootNodes() Funktion aufrufen, so es wird nicht angerufen werden.

if (rootNode.hasClass('expandLink')){ 
    rootNode.click(); 
    limitRootNodes(); 
} 

Answer 2

Ihre tree_ul Variable ist die Auswahl alle Kinder dieser ul, dann :last-child der Kinder Sie versuchen, dieses li zu wählen (für die keine Kinder vorhanden sind). Versuchen:

$('li:last', tree_ul).remove(); 

Von der jQuery Dokumentation:

: last-child

Spiele alle Elemente, die die letzte Kind ihrer Eltern sind. Während: last nur einem einzelnen Element entspricht, stimmt dieses mehr als eins überein: Eins für jedes Elternelement.

: letzte

Gleicht das zuletzt ausgewählte Element.

Eine weitere Option ist filter() zu verwenden:

var max_listCount = 3; 
$('#Tree ul li ul:first').children().filter(function(index){ 
    return (index >= max_listCount); 
}).remove(); 

Dadurch werden alle untergeordneten Knoten mit index >= max_listCount entfernen.

Answer 3

Zunächst, wie John bereits betont hat, werden Sie nichts mit dem Selektor entfernen, den Sie verwenden. Ich habe den "children()" -Teil der tree_ul-Variable entfernt, um dabei zu helfen. Da Sie tree_ul in einer Variablen speichern, gibt tree_ul.size() auch dann denselben Wert zurück, wenn Sie untergeordnete Elemente entfernen, da sie nach dem Entfernen von Elementen nicht aktualisiert werden.

Hier ist die aktualisierte Code, der für Sie arbeiten sollte: es in

$(document).ready(function() { 
var rootNode = $('#Tree ul li a:first'); 

// If the root node has an 'expandLink' class then it's closed and can be opened //(via a click) 
if (rootNode.hasClass('expandLink')){ 
    rootNode.click(); 
    limitRootNodes(); 
} 
function limitRootNodes() { 
    // list limit 
    var max_listCount = 3; 
    // remove the last element if the list size exceeds the limit 
    $('#Tree ul li ul:first').children().filter(function(index){ 
     return (index >= max_listCount); 
    }).remove(); 

} 
}); 

Hier ist ein Link zu sehen Aktion http://jsbin.com/ovala

EDIT: Ich aktualisiert, um Johns filter() Lösung.