如果child aria-expanded = true，则将类添加到父元素

Question

How can I add a class to a parent element if aria-expanded=true ?

I have the following markup:

 $(function () { if ($('.navbar-collapse').attr('aria-expanded') === "true") { $(this).parents("header").addClass('red'); } }); 

 .red { background: red; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script> <header class="navbar navbar-s" id="master" role="banner"> <div class="container"> <nav id="main-navbar" class="navbar-collapse" role="navigation" aria-expanded="true"> Navigation </nav> </div> </header> 

I think the if-query works but not the other code.

Answer 1

The issue you have is that this within the if condition will refer to the window , not your selected .navbar-collapse element.

To solve this you could use the 'attribute selector' to retrieve the element then chain the required methods calls to add the class to the parent target Try this:

 $(function() { $('.navbar-collapse[aria-expanded="true"]').closest('header').addClass('red'); }); 

 .red { background: red; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script> <header class="navbar navbar-s" id="master" role="banner"> <div class="container"> <nav id="main-navbar" class="navbar-collapse" role="navigation" aria-expanded="true"> Navigation </nav> </div> </header> 

Answer 2

this in if block doesn't refers to the nav element thus your didn't work.

You can use Attribute Equals Selector [name=”value”] to target element then traverse up.

 $(function() { $('.navbar-collapse[aria-expanded="true"]').parents("header").addClass('red'); }); 

 .red { background: red; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script> <header class="navbar navbar-s" id="master" role="banner"> <div class="container"> <nav id="main-navbar" class="navbar-collapse" role="navigation" aria-expanded="true"> Navigation </nav> </div> </header>