Is there a way to check if a div has the same class as an ancestor in jQuery?_问答_开发者

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

开发者 https://www.devze.com 2022-12-30 18:27 出处：网络

I\'m looking to dynamically highlight a tab, if it represents the current page. I have: <style> #tabs li{bg-color: white;}

相关专题：css 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 an开发者_高级运维other 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>

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>

You can check parents() length:

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

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

精彩评论

关注公众号

热门标签

图文推荐

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

更多 问答 相关资讯：

精彩评论

关注公众号

热门标签

图文推荐

更多问答相关资讯：