Question

I’m attempting to add a click function to an A element UNLESS the parent LI has a certain class (.current)

The following doesn’t seem to work:

$('ul li:not(.current) a').click(function (e) {

Here’s a jsFiddle:

http://jsfiddle.net/WvPE7/

I don’t want the click function to execute for ‘ul li.current a’ – just ‘ul li a’ (without .current)

Surely I’ve missed something very simple… any help appreciated! 🙂

Answer 1

You should add a small condition instead of using :not('.current').

if ($(this).parent().hasClass('current')) return;

The events are bound when you run $('ul li:not(.current) a') and at that point, there are no li with class current.

DEMO: http://jsfiddle.net/WvPE7/5/

Full Code:

$('ul li a').click(function (e) {
    e.preventDefault();

    if ($(this).parent().hasClass('current')) return;

    $('p').hide();
    $('li').removeClass('current');
    $(this).parent().addClass('current');
    var myClass = $(this).attr('class');
    $('p.' + myClass).fadeIn();
});