选择器 > 似乎在 jquery 中不起作用

Question

我需要为所有直接子级设置红色背景

#destinations 但我不想为

Paris

设置背景，因为它不是#destinations

的直接后代

<html>
<head>
    <title>Hijos Directos</title>
    <script type="text/javascript" src="jquery-1.11.1.js">

    </script>
    <script type="text/javascript">
      $(document).ready(function(){
        $("#destinations > li").css("background-color","red");
      });
    </script>
</head>
<body>
    <h1>Where do you want to go?</h1>
    <h2>Travel Destinations</h2>
    <p>Plan your next adventure.</p>
    <ul id="destinations">
        <li>Rome</li>
        <li>
            <ul id="france">
                <li>Paris</li>
            </ul>
        </li>
        <li>Rio</li>
    </ul>
</body>

Answer 1

您可以将 :not 与 :has 选择器一起使用来仅定位空的 li 元素：

$(document).ready(function(){
   $("#destinations > li:not(:has(ul))").css("background-color","red");
});

Working Demo

Answer 2

代码按预期工作。正在为法国的父 li 设置颜色，这导致整个 li 为红色。子li继承了父li的背景颜色。

在任何网络浏览器检查器中检查代码并查看此内容。

您可以试试这个作为解决方案。 http://jsfiddle.net/uLfdnzc0/

$(document).ready(function(){
    $("#destinations > li").css("background-color","red");
    $("#destinations > li > ul").css("background-color","white");
});

选择器 > 似乎在 jquery 中不起作用

Selector > seems not working in jquery

jquery

jquery-plugins