Question

我只想在jquery中选择类别为li或options的元素level

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
<div class="root-head">
  <ul>
      <li class="level" name="name1">main</li>
      <li class="level options" name="name2">
          sub1
          <ul class="option-selector lv1">
                  <li value="1">option1</li>
                  <li value="2">option2</li>
                  <li value="3">option2</li>
                  <li value="4">option3</li>
                  <li value="5">option4</li>
                  <li value="6">option5</li>

          </ul>
      </li>
      <li class="level options betimes" name="name3">
          sub2
      </li>
      <li class="level options betimes" name="name4">
          sub3
      </li>
  </ul>
</div>

如何仅在单击sub1文本而不是像li那样的所有<li value="1">option1</li>元素时才调用下面的函数

$("li[name=name2]").click(function () {
            console.log("Funtion called");
            if (/*suplimentary condition*/) {
                console.log("Yes is here");
            }
        });

在我的question的最后一个也许有用！

Answer 1

您必须在子点击事件中停止事件传播

$(".level").click(function () {
    console.log("Funtion called");
});

$(".level ul").click(function (e) {
    e.stopPropagation();
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
<div class="root-head">
  <ul>
      <li class="level" name="name1">main</li>
      <li class="level options" name="name2">
          sub1
          <ul class="option-selector lv1">
                  <li value="1">option1</li>
                  <li value="2">option2</li>
                  <li value="3">option2</li>
                  <li value="4">option3</li>
                  <li value="5">option4</li>
                  <li value="6">option5</li>

          </ul>
      </li>
      <li class="level options betimes" name="name3">
          sub2
      </li>
      <li class="level options betimes" name="name4">
          sub3
      </li>
  </ul>
</div>

Answer 2

您可以检查event.target是否与this相同。

event.target将是实际单击的元素。
this将也是单击功能的绑定元素。

根据jquery docs，这是检测事件冒泡的正确方法。

$("li[name=name2]").click(function(e) {
  if (e.target === this) {
    console.log("sub clicked");
  }
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
<div class="root-head">
  <ul>
    <li class="level" name="name1">main</li>
    <li class="level options" name="name2">
      sub1
      <ul class="option-selector lv1">
        <li value="1">option1</li>
        <li value="2">option2</li>
        <li value="3">option2</li>
        <li value="4">option3</li>
        <li value="5">option4</li>
        <li value="6">option5</li>

      </ul>
    </li>
    <li class="level options betimes" name="name3">
      sub2
    </li>
    <li class="level options betimes" name="name4">
      sub3
    </li>
  </ul>
</div>

Answer 3

更具体-为目标在dom中提供一些独特性

<li class="level options" name="name2">
    <div>sub1</div>
    <ul class="option-selector lv1">
        <li value="1">option1</li>
        <li value="2">option2</li>
        <li value="3">option2</li>
        <li value="4">option3</li>
        <li value="5">option4</li>
        <li value="6">option5</li>
    </ul>
</li>


$('li[name="name2"] > div').click(function () {
    console.log("Funtion called");
    if (/*suplimentary condition*/) {
        console.log("Yes is here");
    }

});

如何只选择jQuery上的父级？

3 个答案: