Question

我试图为每个具有更多（或等于＆小于）2 li的ul添加一个类。

不知怎的，我无法继续下去。我要么最后添加到所有2级的课程，要么没有。

以下是代码I＆＃39; m，使用：

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

你在做什么是你在推广一切。在封闭内部使其具体化。请参阅以下代码段：

＆＃13;

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

＆＃13;

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

＆＃13;

<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>

＆＃13;

此外，您必须将课程应用于父母，而不是孩子。

Answer 3

您可以将该类添加到ul元素中，该元素具有第3个li子元素（即具有2 li以上）

＆＃13;

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

＆＃13;

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

＆＃13;

<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>

＆＃13;

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/

将类添加到具有更多（或）少于2个li的ul

4 个答案: