CODEWITHSUNDEEP
jquerycss
T.R.
T.R.

Reputation: 7592

Is there a way to check if a div has the same class as an ancestor in jQuery?

I'm looking to dynamically highlight a tab, if it represents the current page. I have:

<style>
 #tabs li{bg-color: white;}
 body.Page1 #tabs .Page1,
 body.Page2 #tabs .Page2,
 body.Page3 #tabs .Page3{bg-color: orange;}
</style>
<body class="Page1 ADifferentClass">
 <ul id="tabs">
  <li class="Page1 SomeClass">
  <li class="Page2 SomeOtherClass">
  <li class="Page3 AnotherClass">
 </ul>
</body>

As you can see, there needs to be CSS for each tab, so adding another page involves modifying both the HTML and the CSS. Is there a simple (DRY) way to check if two divs have the same class already built into jQuery?

I ultimately went with this:

<script>
$(document).ready(function(){
  var classRE = /Page\d+/i;
  var pageType = $('body').attr('className').match(classRE);
  $('li.'+pageType).addClass('Highlight');
});
</script>
<style>
  #tabs li{bg-color: white;}
  #tabs li.Highlight{bg-color: orange;}
</style>

Upvotes: 2

Views: 193

Answers (2)

mamoo
mamoo

Reputation: 8166

You can check parents() length:

if ($('#myElement').parents('.myClass').length > 0)

Upvotes: 1

A G
A G

Reputation: 22587

How about having two common classes "Highlight" and "Normal".

<style> 
 #tabs li{bg-color: white;} 
 body.Page1 #tabs .Page1, 
 body.Page2 #tabs .Page2, 
 body.Page3 #tabs .Page3{bg-color: orange;} 
</style> 
<body class="Page1 ADifferentClass"> 
 <ul id="tabs"> 
  <li class="Highlight"> 
  <li class="Normal"> 
  <li class="Normal"> 
 </ul> 
</body>

Upvotes: 2

Related Questions