Question

我在WordPress中有一个具有以下结构的列表

<ul class="woof_list woof_list_radio">

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

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

                <ul class="woof_childs_list woof_childs_list_444">
                    <li>
                        <label class="woof_radio_label" for="woof_unselect">Product 1</label>
                    </li>

                    <li>
                        <label class="woof_radio_label" for="woof_unselect">Product 2</label>
                    </li>

                </ul>

            </li>
        </ul>

    </li>

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

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

                <ul class="woof_childs_list woof_childs_list_555">
                    <li>
                        <label class="woof_radio_label" for="woof_unselect">Product 3</label>
                    </li>

                    <li>
                        <label class="woof_radio_label" for="woof_unselect">Product 4</label>
                    </li>

                </ul>

            </li>
        </ul>

    </li>

</ul>

父母1 子类别1

产品1

产品2

父母2 子类别2

产品3

产品4

我想找出父项<li>，如果我单击它的任何子项。

例如，如果我单击“父级1”或“子类别1”或“产品1”或“产品2”，我想找到父级<li class="woof_term_224 woof_childs_list_li">

<li class="woof_term_225 woof_childs_list_li">

也是一样

我当前的代码如下所示，但它不起作用：

  j('.woof_list_radio > li > .woof_radio_label').click(function(e) {
    e.preventDefault();

    j(this).closest('ul').closest('li').addClass('current')

  });

任何想法都值得赞赏。

Answer 1

尝试以下操作：您只需要在closest中为父级li添加类选择器，它将选择正确的li父级。另外，为woof_radio_label内的所有woof_childs_list_li添加点击事件处理程序

 j('.woof_childs_list_li .woof_radio_label').click(function(e) {
    e.preventDefault();
    j(this).closest('ul').closest('li.woof_childs_list_li').addClass('current')
 });

Answer 2

您可以执行以下操作：$(this).closest('li[class^=woof_term_]').addClass('current');

li[class^=woof_term_]将寻找一个以li开头的类的woof_term_

演示

$('.woof_list_radio li .woof_radio_label').click(function(e) {
  e.preventDefault();

  $(this).closest('li[class^=woof_term_]').addClass('current');

});

.current{
  color:blue;
}

<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  woof_childs_list_li">
    <label class="woof_radio_label " for="woof_unselect">Parent 1</label>

    <ul class="woof_childs_list woof_childs_list_224">
      <li class="woof_childs_list_li">
        <label class="woof_radio_label" for="woof_unselect">Sub Category 1</label>

        <ul class="woof_childs_list woof_childs_list_444">
          <li>
            <label class="woof_radio_label" for="woof_unselect">Product 1</label>
          </li>

          <li>
            <label class="woof_radio_label" for="woof_unselect">Product 2</label>
          </li>

        </ul>

      </li>
    </ul>

  </li>

  <li class="woof_term_225  woof_childs_list_li">
    <label class="woof_radio_label " for="woof_unselect">Parent 2</label>

    <ul class="woof_childs_list woof_childs_list_225">
      <li class="woof_childs_list_li">
        <label class="woof_radio_label" for="woof_unselect">Sub Category 2</label>

        <ul class="woof_childs_list woof_childs_list_555">
          <li>
            <label class="woof_radio_label" for="woof_unselect">Product 3</label>
          </li>

          <li>
            <label class="woof_radio_label" for="woof_unselect">Product 4</label>
          </li>

        </ul>

      </li>
    </ul>

  </li>

</ul>

Answer 3

您可以使用通配符jquery选择器在DOM上查找以li开头的第一个woof_term_：

$('.woof_list_radio .woof_radio_label').click(function(e) {
    e.preventDefault();
    $(this).closest("li[class^='woof_term_']").addClass('current')
});

.current{
  background-color: lightblue;
}
label{
  cursor: pointer;
}

<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  woof_childs_list_li">
        <label class="woof_radio_label " for="woof_unselect">Parent 1</label>

        <ul class="woof_childs_list woof_childs_list_224">
            <li class="woof_childs_list_li">
                <label class="woof_radio_label" for="woof_unselect">Sub Category 1</label>

                <ul class="woof_childs_list woof_childs_list_444">
                    <li>
                        <label class="woof_radio_label" for="woof_unselect">Product 1</label>
                    </li>

                    <li>
                        <label class="woof_radio_label" for="woof_unselect">Product 2</label>
                    </li>

                </ul>

            </li>
        </ul>

    </li>

    <li class="woof_term_225  woof_childs_list_li">
        <label class="woof_radio_label " for="woof_unselect">Parent 2</label>

        <ul class="woof_childs_list woof_childs_list_225">
            <li class="woof_childs_list_li">
                <label class="woof_radio_label" for="woof_unselect">Sub Category 2</label>

                <ul class="woof_childs_list woof_childs_list_555">
                    <li>
                        <label class="woof_radio_label" for="woof_unselect">Product 3</label>
                    </li>

                    <li>
                        <label class="woof_radio_label" for="woof_unselect">Product 4</label>
                    </li>

                </ul>

            </li>
        </ul>

    </li>

</ul>

每当我在jQuery中单击子li之一时，如何获取父li？

3 个答案: