Jquery if element has class, add class to this element child

Question

I want to add a class(active) to a child of an element who has a class (is-active) and does not effect other elements. using jQuery!

<ul>
   <li class="nav-item is-active"><a href="#" class="nav-link">Link 1</a><li>
   <li class="nav-item"><a href="#" class="nav-link">Link 2</a><li>
   <li class="nav-item"><a href="#" class="nav-link">Link 3</a><li>
   <li class="nav-item"><a href="#" class="nav-link">Link 4</a><li>
</ul>

I'm using this code but it's effect all other elements.

if ($(".nav-item").hasClass("is-active")) {
  $('a', this).addClass('active');
}

I want to be like this:

<ul>
       <li class="nav-item is-active"><a href="#" class="nav-link active">Link 1</a><li>
       <li class="nav-item"><a href="#" class="nav-link">Link 2</a><li>
       <li class="nav-item"><a href="#" class="nav-link">Link 3</a><li>
       <li class="nav-item"><a href="#" class="nav-link">Link 4</a><li>
</ul>

Satpal · Accepted Answer · 2018-03-15 05:54:28Z

1

You can chain the selector to target the parent then use .find() to get the child.

$(".nav-item.is-active").find('a').addClass('active')

answered Mar 15, 2018 at 5:54

Satpal

134k13 gold badges168 silver badges171 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Malay Solanki · Accepted Answer · 2018-03-15 05:53:22Z

0

if ($(".nav-item").hasClass("is-active")) {
  $(this).find('a').addClass('active');
}

You this code it will work

answered Mar 15, 2018 at 5:53

Malay Solanki

1102 silver badges10 bronze badges

2 Comments

x1024 Over a year ago

No, its effect all elements too.

Malay Solanki Over a year ago

Please check in your html if you have "is-active" class anywhere

Kiran Shahi · Accepted Answer · 2018-03-15 05:58:36Z

0

You can loop through your element and add class if current element has certain class. Here is working example.

var navlist = $(".nav-item");
$.each(navlist, function() {
  if ($(this).hasClass("is-active")) {
    $(this).find('a').addClass('active');
  }
});

console.log($('ul').html())

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul>
   <li class="nav-item is-active"><a href="#" class="nav-link">Link 1</a><li>
   <li class="nav-item"><a href="#" class="nav-link">Link 2</a><li>
   <li class="nav-item"><a href="#" class="nav-link">Link 3</a><li>
   <li class="nav-item"><a href="#" class="nav-link">Link 4</a><li>
</ul>

answered Mar 15, 2018 at 5:58

Kiran Shahi

8,0109 gold badges41 silver badges77 bronze badges

Comments

Pranav C Balan · Accepted Answer · 2018-03-15 06:06:54Z

You can combine it's into a single selector(which selects a tag within .nav-item having is-active) and then add class to that.

$('.nav-item.is-active a').addClass('active');

$(".nav-item.is-active a").addClass('active');

console.log($('ul').html())

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul>
  <li class="nav-item is-active"><a href="#" class="nav-link">Link 1</a>
    <li>
      <li class="nav-item"><a href="#" class="nav-link">Link 2</a>
        <li>
          <li class="nav-item"><a href="#" class="nav-link">Link 3</a>
            <li>
              <li class="nav-item"><a href="#" class="nav-link">Link 4</a>
                <li>
</ul>

FYI : In your code this does not refer to the element, it may be window object or something else so it won't work. To make it work use each() method.

$(".nav-item").each(function(){
  if($(this).hasClass("is-active")) {
     $('a', this).addClass('active');
  }
})

$(".nav-item").each(function() {
  if ($(this).hasClass("is-active")) {
    $('a', this).addClass('active');
  }
})

console.log($('ul').html())

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul>
  <li class="nav-item is-active"><a href="#" class="nav-link">Link 1</a>
    <li>
      <li class="nav-item"><a href="#" class="nav-link">Link 2</a>
        <li>
          <li class="nav-item"><a href="#" class="nav-link">Link 3</a>
            <li>
              <li class="nav-item"><a href="#" class="nav-link">Link 4</a>
                <li>
</ul>

Collectives™ on Stack Overflow

Jquery if element has class, add class to this element child

4 Answers 4

Comments

2 Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

Comments

2 Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related