jquery的目标是ul li,但不包括ul子li。

问题描述 投票:0回答:1

我有一个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");

});

但我不能只访问第一个li(并排除子li),以下是我试过的方法。

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

    console_log("parent");

});

我不知道我做错了什么,有人能帮帮我吗?

谢谢

jquery css css-selectors
1个回答
0
投票

问题是子元素中的点击会冒泡到父元素。你需要为子元素写一个点击处理程序,以防止冒泡。

$(".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>
© www.soinside.com 2019 - 2024. All rights reserved.