Question

Such a simple concept but I’m struggling to express it … apologies in advance for my verbosity.

I have a container div with a class, e.g., ; I want to use that class to do two things:

1. add a class (e.g., ‘active’) to the nav element whose ID matches the class of div#container (e.g., #nav-primary li# apples)
2. add the same class to another element if part of this element’s ID matches the class of #container (e.g., div#secondary-apples)

I assume there’s an .each() loop to check the primary nav’s list items’ IDs, and to check the div IDs of the secondary nav … though the latter needs to have its prefix trimmed … or should I say more simply if the secondary nav div IDs contain the class of div#container?

I’ve tried a few variations of something like this:

<script type="text/javascript">
   $(document).ready(function() {

    $('#nav-primary li').each(function(){
       var containerClass = $('#container').attr('class');
       var secondaryID = $('#nav-primary li').attr('id');

            // something like
            if ('#nav-primary li id' == (containerClass)
            {
            }

            // or should I first store a variable of the LI's ID and do something like this:
            if ( secondaryID == containerClass )
            {
            }

            //   and for the trickier part, how do I filter/trim the secondary nav div IDs, something like this:
       var secondaryNavID = $('#aux-left div[id ... something here to strip the 'secondary-' bit ... ]');

      }); // end each

}); // end doc.ready.func
</script>

The markup is, e.g.:

<div id="container" class="apples"> ...
   <ul id="nav-primary">
      <li id="apples"> ...
      <li id="oranges"> ...
      <li id="bananas"> ...
   </ul>



<div id="aux-left">
   <div id="secondary-apples"> ... 
   <div id="secondary-oranges"> ... 
   <div id="secondary-bananas"> ... 

Many thanks in advance for any suggestions,
svs

Answer 1

Thanks to munch and mnemosyn.

Munch – outrageous! That simplicity is what I was after from the get-go but just couldn’t cobble it together … and btw, there’s no ‘active’ class by default so I was able to trim 2 lines of your solution – a thing of beauty! … and I was happy as a clam that I’d previously found this solution:

$(document).ready(function() {
    var containerClass = $('#container').attr('class');

    $('#nav-primary li').each(function(){
        var secondaryID = $(this).attr('id');
        if  ( secondaryID == containerClass )
            {
                $(this).addClass('active');
                $('#aux-left').find('div[id*="'+secondaryID+'"]').each(function(){
                    $(this).addClass('active');
                }); // end #aux-left.find
            }       // end if
    }); // end #nav-primary.each    
}); // end doc.ready.func

… but yours is even better!

Huge thank you!

cheers, svs