CODEWITHSUNDEEP
javascriptjqueryhtmlcss
Pavel
Pavel

Reputation: 153

Find ul with a specific li item in a collection of ul and than add class to it

I have a collection of unordered lists. I would like to iterate through this list and than find an specific li item and than add a class to the ul containing that li.

I hope I was clear enough for you guys. Let me show you my code for better understanding.

This is a fiddle I created to help you understand my problem.

https://jsfiddle.net/wdwn9swu/

This is what I tried to target the ul I need but it didn't work.

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

I would like that on of the lists that corresponds with the id, to always be open.
Any idea guys ?? Thanks!!

Upvotes: 0

Views: 1081

Answers (2)

Giacomo Penuti
Giacomo Penuti

Reputation: 1068

I think the easiest and simplest way is:

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

According the fact you are using valid html <li> element parent must be <ul> element in that case (can also be <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>

Upvotes: 1

Ori Drori
Ori Drori

Reputation: 191976

Use jQuery's :has selector:

Selects elements which contain at least one element that matches the specified selector.

Find ul.sub-tab that has a list item with .super-active class, and add the class .super-active to the ul as well:

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

Example:

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

Upvotes: 0

Related Questions