如何检测单击的元素是否不是jQuery中元素的子元素？

Question

我在 WordPress 中有一个嵌套列表，点击它会相应地过滤产品。

这就是代码的样子：

<ul class="woof_list woof_list_radio">

  <li class="woof_term_224">
    <label class="woof_radio_label " for="woof_unselect">Parent Category 1</label>

    <ul class="woof_childs_list woof_childs_list_224">
      <li class="woof_childs_list_li">
        <label class="woof_radio_label">Sub Category 1</label>
      </li>
    </ul>
  </li>

  <br>

  <li class="woof_term_225">
    <label class="woof_radio_label " for="woof_unselect">>Parent Category 2</label>

    <ul class="woof_childs_list woof_childs_list_225">
      <li class="woof_childs_list_li">
        <label class="woof_radio_label">Sub Category 2</label>
      </li>
    </ul>
  </li>

  <br>

  <li class="woof_term_226">
    <label class="woof_radio_label " for="woof_unselect">>Parent Category 3</label>

    <ul class="woof_childs_list woof_childs_list_226">
      <li class="woof_childs_list_li">
        <label class="woof_radio_label">Sub Category 3</label>
      </li>
    </ul>

  </li>

</ul>

• 父类别 1
o 子类别 1
• 家长类别 2
o 子类别 2
• 家长类别 3
o 子类别 3

我有被点击元素的选择器。

j(document).on('click', '.woof_list_radio .woof_radio_label', function(e) {

});

如果我单击子类别 1 <label> 元素，它是 <li class="woof_term_224"> 的子元素，然后我单击父类别 2 <label> 元素，您知道如何检测单击的 <label> 是否不是<li class="woof_term_224"> 或检测到它在其父级之外被点击？

Answer 1

您可以检查与woof_term_224 类最接近的长度以确定这一点。您可以通过将选择器更改为：

$(document).on('click', '.woof_list_radio > [class^=woof_term_]', function(e) {

代码示例：

$(document).on('click', '.woof_list_radio > [class^=woof_term_]', function(e) {
  let len = $(this).closest('.woof_term_224').length;
  if(len)
    console.log('The child');
  else
    console.log('Not the child');
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul class="woof_list woof_list_radio">

  <li class="woof_term_224">
    <label class="woof_radio_label " for="woof_unselect">Parent Category 1</label>

    <ul class="woof_childs_list woof_childs_list_224">
      <li class="woof_childs_list_li">
        <label class="woof_radio_label">Sub Category 1</label>
      </li>
    </ul>
  </li>

  <br>

  <li class="woof_term_225">
    <label class="woof_radio_label " for="woof_unselect">>Parent Category 2</label>

    <ul class="woof_childs_list woof_childs_list_225">
      <li class="woof_childs_list_li">
        <label class="woof_radio_label">Sub Category 2</label>
      </li>
    </ul>
  </li>

  <br>

  <li class="woof_term_226">
    <label class="woof_radio_label " for="woof_unselect">>Parent Category 3</label>

    <ul class="woof_childs_list woof_childs_list_226">
      <li class="woof_childs_list_li">
        <label class="woof_radio_label">Sub Category 3</label>
      </li>
    </ul>

  </li>

</ul>

可以通过以下方式找到被点击元素的父类：

$(document).on('click', '.woof_list_radio > [class^=woof_term_]', function(e) {
  let parentClass = $(this).closest('[class^=woof_term_').prop('class');
  console.log('Element is the child of class',parentClass);
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul class="woof_list woof_list_radio">

  <li class="woof_term_224">
    <label class="woof_radio_label " for="woof_unselect">Parent Category 1</label>

    <ul class="woof_childs_list woof_childs_list_224">
      <li class="woof_childs_list_li">
        <label class="woof_radio_label">Sub Category 1</label>
      </li>
    </ul>
  </li>

  <br>

  <li class="woof_term_225">
    <label class="woof_radio_label " for="woof_unselect">>Parent Category 2</label>

    <ul class="woof_childs_list woof_childs_list_225">
      <li class="woof_childs_list_li">
        <label class="woof_radio_label">Sub Category 2</label>
      </li>
    </ul>
  </li>

  <br>

  <li class="woof_term_226">
    <label class="woof_radio_label " for="woof_unselect">>Parent Category 3</label>

    <ul class="woof_childs_list woof_childs_list_226">
      <li class="woof_childs_list_li">
        <label class="woof_radio_label">Sub Category 3</label>
      </li>
    </ul>

  </li>

</ul>

Answer 2

您可以检查目标元素（被点击的元素）.matches 是否为.woof_term_224 的后代的选择器字符串：

$(document).on('click', '.woof_list_radio .woof_radio_label', ({ target }) => {
  if (target.matches('.woof_term_224 *')) console.log('Clicked on child of 224')
  else console.log('Clicked on something outside of 224');
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul class="woof_list woof_list_radio">

  <li class="woof_term_224">
    <label class="woof_radio_label " for="woof_unselect">Parent Category 1</label>

    <ul class="woof_childs_list woof_childs_list_224">
      <li class="woof_childs_list_li">
        <label class="woof_radio_label">Sub Category 1</label>
      </li>
    </ul>
  </li>

  <br>

  <li class="woof_term_225">
    <label class="woof_radio_label " for="woof_unselect">>Parent Category 2</label>

    <ul class="woof_childs_list woof_childs_list_225">
      <li class="woof_childs_list_li">
        <label class="woof_radio_label">Sub Category 2</label>
      </li>
    </ul>
  </li>

  <br>

  <li class="woof_term_226">
    <label class="woof_radio_label " for="woof_unselect">>Parent Category 3</label>

    <ul class="woof_childs_list woof_childs_list_226">
      <li class="woof_childs_list_li">
        <label class="woof_radio_label">Sub Category 3</label>
      </li>
    </ul>

  </li>

</ul>