限制在嵌套列表中添加列表元素的數量jQuery

Hy。我有一個列表，當我按下對應於特定li元素的「添加」按鈕時，它將爲該li添加一個子項。我想限制我可以添加到所有li元素的孩子數量。例如，我希望能夠在list1的右側添加最多2個子節點。我應該能夠按「添加」按鈕附近list1，然後「添加」按鈕旁邊childNode1並停止在那裏。到list2限制在嵌套列表中添加列表元素的數量jQuery

類似我嘗試這樣的東西：

var listItems = $('ul').children().length;; 
alert(listItems);

但它會輸出列表元素的每一次主要<ul>內部總數I，添加一個新的list element。 JSFiddle。

來源

2015-02-05 prsadrian

考慮給你的HTML一個完滿成功的基礎，也許更多的JS – 2015-02-05 16:06:08

您選擇的方式是正確的。只要把它放在if語句中並設置長度的數字即可。

var childLimiter = 2; 
    var listItems = $('ol').children('li').length; 
    if(listItems <= childLimiter){ 
     $(this).parent().append('<ol><li>child node<input type="button" value="add" /></li></ol>');  
    } else { 
     $(this).parent().append('<ol><li>child node</li></ol>'); 
    }

看到更新fiddle

問候提摩太

來源

2015-02-05 16:12:42

我已經測試的代碼了一下，有一個問題。而不是「childLimiter」，我需要一個「levelLimiter」，這樣所有在'list1'和'list2'第一級的孩子都必須有一個「add」按鈕。所有在'list1'和'list2'第二級的孩子都不應該有「添加」按鈕。任何想法如何完成？ – prsadrian 2015-02-05 17:20:13

最簡單的解決方案是，如果你給你的dom第一個ol課。比如「OL - 啓動」，比你只需要改變，如果來自：如果（listItems中的<= childLimiter）{ 到：如果（$（本）.parent（）父（ '醇'）hasClass。（'startingOl'））{working fiddle：http://jsfiddle.net/CfY5b/27/ – 2015-02-05 17:43:17

非常感謝您的解決方案。它現在有效。如果我想用更多的兒童級別按鈕來擴展它，我只需要添加另一個「if子句」，它附加一個「ol class =」Level2「'。 – prsadrian 2015-02-05 18:19:22

限制在嵌套列表中添加列表元素的數量jQuery

回答

相關問題