Question

我正在尝试使用jQuery实现以下功能：

查看页面上的ul列表，并确定具有（A）特定类和（B）仅具有1个子LI元素的列表
然后我想将另一个课程应用于那些UL

这是我到目前为止所拥有的：

$("ul.class-to-look-for").each(function() {
    var totalLists = $(this).find("li").length;
    if (totalLists = 1) {
        $(this).parent().addClass("class-to-add");
    }
});

但这不起作用 - 我错过了一些明显的东西吗？

Answer 1

你可以使用only-child选择器来选择你需要的东西 - 一些只有一个孩子的ul

$('ul.classToLookFor li:only-child').parent().addClass('foo')

.foo {
  color: red;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul class="classToLookFor">
  <li>Foo</li>
</ul>

<ul class="classToLookFor">
  <li>Foo</li>
  <li>Foo</li>
</ul>

Answer 2

代替$(this).parent()您必须使用$(this)，因为您正在循环ul。所以，$(this)它是当前ul与该类的对象。

$("ul.class-to-look-for").each(function() {
    var totalLists = $(this).find("li").length;
    if (totalLists == 1) {
        $(this).addClass("class-to-add");
    }
});

.class-to-add {
  color: red;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul class="class-to-look-for">
  <li>Item</li>
</ul>

<ul class="class-to-look-for">
  <li>Item</li>
  <li>Item</li>
</ul>

Answer 3

$.each("ul.class-to-look-for", function(index, matchingElement) {
    var totalLists = $(matchingElement).children("li");
    if (totalLists.length === 1) {
        $(matchingElement).addClass("class-to-add");
    }
});

如果您遇到困难，可以在第二行的开发者工具中设置断点并重新加载页面。

如果它从未到达断点，则第一个UL选择器出现问题。

如果它点击它，你可以评估它以查看它包含的LI项目。

如果只有一个孩子li，我如何将一个类应用于父UL

3 个答案: