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>元素，您知道如何检测是否单击了{{ 1}}不是<label>的子级，或者检测到它不在其父级中被点击？

Answer 1

您可以检查目标元素（单击的元素）是否.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>

Answer 2

您可以检查类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>

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

2 个答案: