每當我點擊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>