將類添加到具有（大於）2 li的ul的ul

Question

我正在嘗試為每個具有2個以上li（或小於2個li）的ul添加一個類。

不知何故我無法繼續前進。 我要么以添加到所有2級ul的類結束，要么都不添加任何類。

這是我使用的代碼：

$(document).ready(function() {
  var countli = $('ul.level_2 li').length;
    if(countli >= 3) {
      $("ul.level_2").addClass("short");
    }
});

我想念什么？

http://jsfiddle.net/gmodesignz/20dksk4y/3/

Answer 1

您應該使用.filter()

將匹配元素的集合減少到與選擇器匹配或通過功能測試的元素。

腳本

$("ul.level_2").filter(function () {
    return $(this).find('li').length >= 3
}).addClass("short");

演示

Answer 2

您正在做的是將所有內容概括化。 使其在封閉內特定。 請參見以下代碼段：

 $(document).ready(function() { $('ul.level_2').each(function () { if ($(this).children().length > 2) $(this).addClass("short"); }); }); 

 * {font-family: 'Segoe UI';} ul {color: blue;} .short {color: red;} .large {color: green;} 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script> <ul> <li>No Submenu</li> <li class="sub"> Long Submenu <ul class="level_2"> <li>Something</li> <li>Something</li> <li>Something</li> <li>Something</li> <li>Something</li> </ul> </li> <li class="sub"> Short Submenu <ul class="level_2"> <li>Something</li> <li>Something</li> </ul> </li> </ul> 

另外，您必須將課程應用於父母而不是孩子。

Answer 3

您可以將類添加到具有第三個li子元素（即，具有2個以上li ）的ul元素中，例如

 $(document).ready(function() { $('ul.level_2').has('li:eq(2)').addClass("short"); }); 

 ul { color: blue; } .short { color: red; } .large { color: green; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> <ul> <li>No Submenu</li> <li class="sub"> Long Submenu <ul class="level_2"> <li>Something</li> <li>Something</li> <li>Something</li> <li>Something</li> <li>Something</li> </ul> </li> <li class="sub"> Short Submenu <ul class="level_2"> <li>Something</li> <li>Something</li> </ul> </li> </ul> 

Answer 4

$(document).ready(function() {
    $("ul .level_2").each(function(){
        var countLi = $(this).find("li").length;
        if(countLi <= 3 ){
           $(this).find("li").addClass("short");
         }
    });
});

http://jsfiddle.net/OsamaMohamed/wsu8xwwg/