javascript - 无法使用子选择器定位特定的 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>

我试图只选择从类 (.list) 派生的 LI 元素。总是，当我单击时，类(.sublist)的子项也会被激活。我单击的所有内容都会给我警报。这不是我想要的。我很沮丧，因为我知道答案很简单，但我就是想不通。

我也试过用这个:

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

Answer 1

使用 direct child combinator, > , 为了只选择直接子元素:

ul.list > li

但由于这仍然选择了包含 .sublist 元素的 li，因此请结合使用 :not()/:has()选择器:

$('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>