jQuery的無法刪除列表中的元素

我有一個樹ul並具有以下結構：jQuery的無法刪除列表中的元素

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

但是，上面的代碼並沒有刪除多餘的列表元素。有什麼建議是什麼導致這個？

來源

2009-06-12 chridam

下面是解決這個問題的另一種方法。這種替換您while循環：

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

編輯：此外，在你的HTML示例中，第一錨標記具有collapseLink類，但調用limitRootNodes()函數之前這段代碼是尋找類expandLink，所以它不會被調用。

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

來源

2009-06-12 15:04:02

你tree_ul變量是選擇ul的所有孩子，那麼你要選擇li（對於沒有孩子存在）的兒童:last-child。嘗試：

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

從jQuery的文檔：

：最後一個孩子

比賽是最後孩子他們的父母的所有元素。 while：last 只匹配一個元素，這個匹配多個然後一個：每個父級。

：最後

匹配最後選定的元件。

另一種選擇是使用filter()：

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

這將刪除所有子節點與index >= max_listCount。

來源

2009-06-12 14:37:17

感謝John對您的及時貢獻。但是，根據建議更改屬性不起作用。我想相信也許我打電話的方法是錯誤的？ – chridam 2009-06-12 15:02:40

T B指出了我的錯誤。我已經將其更新爲包含filter（）函數，這可能是最簡單的方法。 – 2009-06-12 15:04:25

+1我將您的過濾器（）解決方案添加到我的代碼中。 – 2009-06-12 15:17:35

首先，正如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

編輯鏈接：我更新，包括約翰的過濾器（）解決方案。

來源

2009-06-12 14:49:13

jQuery的無法刪除列表中的元素

回答

相關問題