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

您的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的所有子节点。

Answer 2

首先，正如John已经指出的那样，你不会使用你正在使用的选择器删除任何东西。我删除了tree_ul变量的“children（）”部分以帮助解决这个问题。此外，由于您将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

查看

编辑：我更新了包含John的过滤器（）解决方案。

Answer 3

这是解决这个问题的另一种方法。用这个替换你的while循环：

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

编辑：此外，在您的HTML示例中，第一个锚标记具有类collapseLink，但此代码在调用{{1}之前查找类expandLink函数，所以它不会被调用。

limitRootNodes()

jQuery无法删除列表元素

3 个答案: