1

我不明白为什么我的 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 ..？

4

7 回答 7

2

http://jsfiddle.net/PddPv/

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

哪里$('ul', this)[0]是 JS 告诉我们元素是否存在（方法的方式.length）
并且?:是条件运算符的好方法

于 2013-08-04T16:04:52.653 回答
1

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

根据.has()文档：

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

你可以利用 has 这种方式 -

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

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

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

于 2013-08-04T16:04:10.283 回答
0 
// 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");
    }
});
于 2013-08-04T15:55:26.853 回答
0

和 John 一样，只是这样可以确保您只选择 li 的正下方（作为子项）#toolbar，而不是任何 sub li

// 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 是默认背景颜色。然后为“有 ul”li 的背景颜色创建另一个类：#ff0000。（当只是设置颜色时，为了清晰起见，我更喜欢背景颜色而不是背景）

于 2013-08-04T15:57:15.063 回答
0

这是你想要的 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");

});
于 2013-08-04T16:00:09.660 回答
0

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

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

小提琴

于 2013-08-04T16:01:00.807 回答
0

另一种方法：

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

这使用了 has 选择器。我想这就是你想做的

或直接

 $("li").css("background", "#336699").has("ul").css("background", "#ff0000");
于 2013-08-04T16:04:02.757 回答