將類添加到具有更多（或）少於2個li的ul中

Question

我試圖向每個具有更多（或等於&小於）2個li的ul添加一個類。

不知怎的，我不能去。我最終會在所有2級或更高級別的課程中加入一門課。

這裏是我的代碼，使用：

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

DEMO

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

您可以將該類添加到具有3 li子ul元素（即有超過2 li）像

$(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/