每当我点击jQuery中的一个子li时，如何获取父li？

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_]将查找具有以woof_term_开头的类的li

演示

 $('.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以找到以woof_term_开头的第一个li ：

 $('.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>