jQuery не может удалить элементы списка

Question

У меня есть дерево с ul и имеет следующую структуру:

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

В идеале я хотел бы ограничить количество подузлов в дереве и попытался реализовать это следующим образом:

$(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();  
        }   
    }
});

Однако приведенный выше код не удаляет лишние элементы списка. Любые предложения относительно того, что вызывает это?

Answer 1

Прежде всего, как уже отмечал Джон, вы не собираетесь ничего удалять с помощью используемого вами селектора. Я удалил часть children () переменной tree_ul, чтобы помочь с этим. Кроме того, поскольку вы храните tree_ul в переменной, tree_ul.size () будет возвращать то же значение даже после удаления дочерних элементов, поскольку оно не будет обновляться после удаления элементов.

Вот обновленный код, который должен работать для вас:

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

}
});

Вот ссылка для просмотра в действии http://jsbin.com/ovala

РЕДАКТИРОВАТЬ: я обновил, чтобы включить решение фильтра Джона ().

Answer 2

Вот еще один способ приблизиться к этому. Замените ваш цикл while следующим:

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

EDIT: Кроме того, в вашем примере HTML первый тег привязки имеет класс collapseLink, но этот код ищет класс expandLink перед вызовом функции limitRootNodes(), поэтому он не будет звонить.

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

Answer 3

Ваша переменная tree_ul выбирает всех дочерних элементов этого ul, затем вы пытаетесь выбрать :last-child дочерних элементов этого li (для которого нет дочерних элементов). Попробуйте:

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

Из документации jQuery:

: последний ребенок

Соответствует всем элементам, которые являются последними ребенок их родителей. Пока: последний соответствует только одному элементу, это соответствует более одного: по одному для каждого родитель.

: последний

Соответствует последнему выбранному элементу.

Другой вариант - использовать filter():

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

Это удалит все дочерние узлы с index >= max_listCount.