Question

我无法弄清楚我做错了什么。

＆＃13;

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

＆＃13;

<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>

＆＃13;

我试图只选择从类（.list）下降的LI元素。当我点击时，班级（.sublist）的孩子也会被激活。我点击的所有内容都会给我提醒。这不是我想要的。我感到沮丧，因为我知道答案很简单，但我无法弄清楚。

我也试过这个：

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

Answer 1

使用direct child combinator, >，仅选择直接子元素：

ul.list > li

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

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

Example Here

＆＃13;

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

＆＃13;

<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>

＆＃13;

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

1 个答案: