Question

I have a few divs that contain unordered lists. Inside those list-items I have buttons you can click. Is it possible to be able to click 1button, add a my class “selected” then kill the href on all list items in that ul? The goal is to be able to use a global function for multiple divs I have like below:

This is the structure of my HTML.

      <div id="dd" class="mywrap-dropdown-2" tabindex="2">Select
                 <ul class="dropdowner" id="coll-filter">
                      <li><a href="">All</a></li>
                      <li><a href="#">White</li>
                      <li><a href="#">Blue</li>
                 </ul>
        </div> 



     <div id="dd" class="mywrap-dropdown-2" tabindex="2">Select
                 <ul class="dropdowner" id="coll-filter">
                      <li><a href="">Metal</a></li>
                      <li><a href="#">Chrome</li>
                      <li><a href="#">Wood</li>
                 </ul>
        </div>

Not sure how to go about this. This function is supposed to use on multiple divs “#dd” not just one.

Answer 1

This code will add class="selected" to the parent <li> of the first clicked anchor and then disable all further actions. Demo: http://jsfiddle.net/9Y5x4/2/

$( '#dd' )
    .on( 'click', 'li', function( e )
        {
            e.preventDefault();             
        }
     )
     .on( 'click.runonce', 'li', function( e )
         {
              $( this ).addClass( 'selected' );

             $( '#dd' ).off( 'click.runonce' );
         }
     );

Edit: Updated the example. Old code: http://jsfiddle.net/9Y5x4/1/