无法使用子选择器定位特定的 LI 元素

Question

我只是不知道我做错了什么。

$('ul.list > li:not(.sublist)').click(function() {
  alert("working now");
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul class="list">
  <li>One</li>
  <li class="special">Two</li>
  <li>Three</li>
  <li>
    <ul class="sublist">
      <li>1</li>
      <li>2</li>
      <li>3</li>
    </ul>
  </li>
</ul>

我正在尝试仅 select 来自 class(.list) 的 LI 元素。 class(.sublist) 的子列表总是在我 click.Eeverything 我点击给我警报时被激活。这不是我想要的。我很沮丧，因为我知道答案很简单，但我就是想不通。

我也试过用这个：

$('ul.list li').not('.sublist').click(function(){
    alert('working');
});

Answer 1

使用 direct child combinator, >，以便仅 select 直接子元素：

ul.list > li

但由于这仍然是 select 包含 .sublist 元素的 li，请结合使用 :not()/:has() select 或：

$('ul.list > li:not(:has(.sublist))').on('click', function () {
    // ...
});

Example Here

$('ul.list > li:not(:has(.sublist))').on('click', function () {
    alert('working');
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul class="list">
    <li>One</li>
    <li class="special">Two</li>
    <li>Three</li>
    <li>
        <ul class="sublist">
            <li>1</li>
            <li>2</li>
            <li>3</li>
        </ul>
    </li>
</ul>

无法使用子选择器定位特定的 LI 元素

Can't target specific LI elements using child selectors

javascript

jquery

jquery-selectors