Question

我无法理解为什么我的jQuery在这种情况下不起作用。我遍历导航中的所有li项并检查每个内部是否存在ul元素，但每个都返回true ..？

我的标记：

<div id="toolbar">
<ul>
 <li>
  <a href="somelink">some page</a>
 </li>
 <li>
  <a href="somelink">some page</a>
 </li>
 <li>
  <a href="somelink">some page</a>
    <ul>
     <li>
      <a href="somelink">some page</a>
      <ul>
        <li>
          <a href="somelink">some page</a>
        </li>
      </ul>
     </li>
    </ul>
 </li>
</ul>
</div>

我的jQuery：

// if has children make red
$("#toolbar li").each(function(){
 if($(this).has("ul")){
    $(this).css("background", "#ff0000");
 }
 else
 {
    $(this).css("background", "#336699"); 
 }
});

正如你所看到的，第三个顶级li应该返回true，但它们都返回true ..？

Answer 1

http://jsfiddle.net/PddPv/

$("#toolbar li").each(function(){
    $(this).css("background", $('ul', this)[0] ? "#f00" : "#369");
});

其中$('ul', this)[0]是一个很好的方式JS告诉我们元素是否存在（.length方法的方式） ?:是conditional operator

Answer 2

您没有以正确的方式使用.has()，.has()不会返回true或false

根据.has()文档：

将匹配元素集减少到具有后代的元素集与选择器或DOM元素匹配。

你可以这样使用 -

$(this).has("ul").css("background", "#ff0000");
$(this).not(':has(ul)').css("background", "#336699");

演示----> http://jsfiddle.net/uTrLX/

http://api.jquery.com/has/

Answer 3

// if has children make red
$("#toolbar li").each(function () {

    // This checks if finds any ul under it
    if ($(this).find("ul").length > 0) {
        $(this).css("background", "#ff0000");
    } else {
        $(this).css("background", "#336699");
    }
});

Answer 4

与John相同，这只是为了确保你只选择#toolbar下面的li（作为孩子），而不再选择sub li's

// if has children make red
$("#toolbar > ul > li").each(function () {

        // This checks if finds any ul under it
        if ($(this).find("ul").length) {
                $(this).css("background", "#ff0000");
        } else {
                $(this).css("background", "#336699");
        }
});

另外，您可能要考虑为这些li制作课程。＃336699是默认的背景颜色。然后创建另一个类，用于具有背景颜色的“has ul”li：＃ff0000。（当设置一种颜色时，为了清晰起见，我更喜欢背景颜色而不是背景颜色）

Answer 5

这是你想要的jsfiddle：http://jsfiddle.net/5NHet/

$("li").css("background", "#fff");
$("#toolbar li:has('ul')").each(function () {

// This checks if finds any ul under it

    $(this).css("background", "#ff0000");

});

Answer 6

你快到了。只需添加.length > 0。

if($(this).has("ul").length > 0){

<强> FIDDLE

Answer 7

另一种方法：

$("li").css("background", "#336699");
$("#toolbar li:has(ul)").css("background", "#ff0000");

这使用了has选择器。这就是我想要做的事情

或直接

 $("li").css("background", "#336699").has("ul").css("background", "#ff0000");

检查li是否包含ul

7 个答案: