jquery 目标 ul li 但排除 ul child li答案

【问题标题】：jquery target ul li but exclude ul child lijquery 目标 ul li 但排除 ul child li
【发布时间】：2020-05-22 19:37:30
【问题描述】：

我有一个 li 项目的 ul 列表，包括一个子 ul。我试图只针对第一个 li 并排除孩子的 li。

这是我的清单：

<li class="sf-field-taxonomy">

    <ul>

        <li class="sf-level-0">

            <input id="sf-input">
            <label>aaaa</label>

            <ul class="children">

                <li class="sf-level-1">

                    <input id="sf-input">
                    <label>bbbb</label>

                </li>

                <li class="sf-level-1">

                    <input id="sf-input">
                    <label>cccc</label>

                </li>

                <li class="sf-level-1">

                    <input id="sf-input">
                    <label>dddd</label>

                </li>

                <li class="sf-level-1">

                    <input id="sf-input">
                    <label>eeee</label>

                </li>

            </ul>

        </li>

    </ul>

</li>

我可以通过使用此代码来定位唯一的孩子 li：

$(".sf-field-taxonomy li:not(:has(ul))").click(function(){

    console_log("children");

});

但我不能只访问拳头李（并排除儿童李），这是我尝试过的：

$(".sf-field-taxonomy ul li").not(".children li").click(function(){

    console_log("parent");

});

我不知道我做错了什么，有人可以帮助我吗？

谢谢

【问题讨论】：

标签： jquery css css-selectors

【解决方案1】：

问题是对子元素的点击会冒泡到父元素。您需要为孩子编写一个点击处理程序来防止冒泡。

$(".sf-field-taxonomy > ul > li").click(function() {
  console.log("Parent");
});
$(".children").click(function(e) {
  e.stopPropagation();
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<li class="sf-field-taxonomy">
  <ul>
    <li class="sf-level-0">
      <input id="sf-input">
      <label>aaaa</label>
      <ul class="children">
        <li class="sf-level-1">
          <input id="sf-input">
          <label>bbbb</label>
        </li>
        <li class="sf-level-1">
          <input id="sf-input">
         <label>cccc</label>
        </li>
        <li class="sf-level-1">
          <input id="sf-input">
          <label>dddd</label>
        </li>
        <li class="sf-level-1">
          <input id="sf-input">
          <label>eeee</label>
        </li>
      </ul>
    </li>
  </ul>
</li>

【讨论】：