Question

我有一系列无序列表。我想迭代这个列表，然后找到一个特定的li项，然后在包含那个li的ul中添加一个类。

我希望我对你们这么清楚。让我告诉你我的代码，以便更好地理解。

这是我创建的一个小提琴，可以帮助您理解我的问题。

这是我试图针对我需要的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＆＃39; :has选择器：

选择包含至少一个与之匹配的元素的元素指定选择器。

查找包含ul.sub-tab类的列表项的.super-active，并将类.super-active添加到ul：

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

示例：

＆＃13;
＆＃13;
$('ul.sub-tab:has(li.super-active)').addClass('super-active');
＆＃13;
.sub-tab.super-active { background: gold; }
＆＃13;
<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">  <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>
＆＃13;
＆＃13;
＆＃13;

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

2 个答案: