Question

There are two div sections with the same class and also has same ul and li and a.

I have two jQuery click events in my code. When I click Google both of the jQuery click events fire. But I do not want both to do so, only one. How do I achieve this?

For example, if Google gets clicked I want only that jQuery click event to do something, not the other one. These are the DOM element I am working with:

<div class = "abc">
 <ul>  
  <li class="year_"><a href="www.google.com">google</a></li>
 </ul>
</div>
<div class ="abc">
 <ul>
  <li><a href="www.yahoo.com>yahoo</a></li>
 </ul>
</div>

The href might change so I cannot base my selector on that. The code that I have follows.

$( 'div.abc ul li[class^="year_"]  a' ).click( function(){
    //do something
});

$( 'div.abc ul li a' ).click( function(){
    //do something
});

Answer 1

You could do a conditional statement, finding the li with the “year_” class:

$( 'div.abc ul li a' ).click( function(){
    if ($(this).parents('li').is('[class^="year_"]')){
        //do something
    } else {
        //do something else
    }
});

See jsfiddle.