在ul的集合中找到具有特定li項的ul，然后向其添加類

Question

我有一些無序列表。 我想遍歷此列表，而不是查找特定的li項目，而不是向包含該li的ul添加一個類。

我希望我對你們足夠清楚。 讓我向您展示我的代碼以更好地理解。

我創建這個小提琴是為了幫助您了解我的問題。

https://jsfiddle.net/wdwn9swu/

這是我試圖鎖定所需的ul的方法，但是沒有用。

if ($('ul.sub-tab').find('ul.sub-tab > li.super-active')) {
        $('ul.sub-tab').find('li.super-active').addClass('super-active');
    }

我希望在與ID對應的列表中始終保持打開狀態。
任何想法的家伙？ 謝謝！！

Answer 1

我認為最簡單的方法是：

$("li.super-active").parent().addClass("super-active");

根據事實，您正在使用有效的html <li>元素，在這種情況下，父元素必須是<ul>元素（也可以是<ol> ）。

 $('.main-tab>li a').click(function() { $(this).siblings('.sub-tab').slideToggle(200); $(this).parent().siblings('li').children('.sub-tab').slideUp(200); }); $('.main-tab li').each(function() { id = '10'; $links = $(".main-tab li[data-id =" + id + "]"); $links.addClass("super-active"); //console.log("1234"); }); $("li.super-active").parent().addClass("super-active"); console.log($(".super-active")); 

 .main-tab ul { padding-left: 10px; } .sub-tab { display: none; } .super-active img { display: block !important; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script> <div class="center"> <ul class="main-tab"> <li data-id="5"> <a href="#">Main 1</a> <ul class="sub-tab"> <li data-id="7"> <a href="#">Main 1 Sub 1</a> <ul class="sub-tab"> <li data-id="10"><a href="#">Sub 2</a></li> <li data-id="11"><a href="#">Sub 2</a></li> </ul> </li> <li> <a href="#">Main 1 Sub 2</a> <ul class="sub-tab"> <li data-id="12"><a href="#">Sub 2</a></li> <li data-id="13"><a href="#">Sub 2</a></li> </ul> </li> </ul> </li> <li data-id="8"> <a href="#">Main 2</a> <ul class="sub-tab"> <li data-id="9"> <a href="#">Main 2 Sub 1</a> <ul class="sub-tab"> <li data-id="14"><a href="#">Sub 2</a></li> <li data-id="15"><a href="#">Sub 2</a></li> </ul> </li> </ul> </li> <li data-id="3"> <a href="#">Main 3</a> <ul class="sub-tab"> <li data-id="25"> <a href="#">Main 3 Sub 1</a> <ul class="sub-tab"> <li data-id="17"><a href="#">Sub 2</a></li> <li data-id="18"><a href="#">Sub 2</a></li> </ul> </li> </ul> </li> </ul> 

Answer 2

使用jQuery的:has選擇器：

選擇包含至少一個與指定選擇器匹配的元素的元素。

查找ul.sub-tab具有與列表項.super-active類，並添加類.super-active到UL以及：

$('ul.sub-tab:has(li.super-active)').addClass('super-active');

例：

 $('ul.sub-tab:has(li.super-active)').addClass('super-active'); 

 .sub-tab.super-active { background: gold; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div class="center"> <ul class="main-tab"> <li data-id="5"> <a href="#">Main 1</a> <ul class="sub-tab"> <!-- this will be removed --> <li data-id="7" class="super-active"> <a href="#">Main 1 Sub 1</a> <ul class="sub-tab"> <li data-id="10"><a href="#">Sub 2</a></li> <li data-id="11"><a href="#">Sub 2</a></li> </ul> </li> <li> <a href="#">Main 1 Sub 2</a> <ul class="sub-tab"> <li data-id="12"><a href="#">Sub 2</a></li> <li data-id="13"><a href="#">Sub 2</a></li> </ul> </li> </ul> </li> <li data-id="8"> <a href="#">Main 2</a> <ul class="sub-tab"> <li data-id="9"> <a href="#">Main 2 Sub 1</a> <ul class="sub-tab"> <li data-id="14"><a href="#">Sub 2</a></li> <li data-id="15"><a href="#">Sub 2</a></li> </ul> </li> </ul> </li> <li data-id="3"> <a href="#">Main 3</a> <ul class="sub-tab"> <li data-id="25"> <a href="#">Main 3 Sub 1</a> <ul class="sub-tab"> <li data-id="17"><a href="#">Sub 2</a></li> <li data-id="18"><a href="#">Sub 2</a></li> </ul> </li> </ul> </li> </ul>