javascript - 如何检测点击的元素是否不是 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"> 的 child 或者检测到它是在其父项之外单击的？

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>