CODEWITHSUNDEEP
jqueryhtmladdclassremoveclass
James Wilson
James Wilson

Reputation: 5150

jQuery onclick Add/Remove class of child element

Here is the HTML:

<a id="docLocked" title="Unlock this document" style="text-decoration: none; cursor: pointer;"><span class="iconfa-lock"></span></a>

When the 'icon' is clicked I need it to remove the class of the span element and then add another class.

Here is what I have but it is not working:

jQuery('#docLocked').click(function () {
        jQuery(this).closest('span').removeClass('iconfa-lock');
        jQuery(this).closest('span').addClass('iconfa-unlock');
    });

What am I doing wrong here?

Upvotes: 2

Views: 32619

Answers (9)

emerson.marini
emerson.marini

Reputation: 9348

If you have the href linking to a different page - which makes no sense here, as you wouldn't notice any class change - it won't work, so you should prevent the default behavior before doing anything else. Also, you need to change the selector, because .closest() will look for a sibling, not a child.

jQuery('#docLocked').on('click', function (e) {
    // Stop the default behavior
    e.preventDefault();

    // Save the href value to be used after (if you need to)
    var href = $(this).attr('href');

    // Select a span which is within the clicked anchor
    jQuery('span', this).toggleClass('iconfa-lock').toggleClass('iconfa-unlock');

    // Doesn't work on jsFiddle
    // if (href != "")
        //window.location.href = href;
});

Working demo: http://jsfiddle.net/GLEc2/

Upvotes: 1

Brajesh Kumar
Brajesh Kumar

Reputation: 937

Try using find in place of closest

Upvotes: 1

Charaf JRA
Charaf JRA

Reputation: 8334

Try this solution , find() is what your are looking for :

jQuery('#docLocked').click(function () {
        jQuery(this).find('span').removeClass('iconfa-lock').addClass('iconfa-unlock');;

    });

Or using .children():

jQuery('#docLocked').click(function () {
        jQuery(this).children()[0].removeClass('iconfa-lock').addClass('iconfa-unlock');;

    });

Upvotes: 1

Marquee
Marquee

Reputation: 1826

I made a fiddle that works for this:

jQuery('#docLocked span').click(function () {
  jQuery(this).removeClass('iconfa-lock').addClass('iconfa-unlock');
});

Upvotes: 1

David Thomas
David Thomas

Reputation: 253308

Why not keep it simple:

$('#docLocked').click(function(e){
    e.preventDefault();
    $(this).find('span').toggleClass('iconfa-lock iconfa-unlock');
});

JS Fiddle demo.

References:

Upvotes: 10

Holt
Holt

Reputation: 37606

The « closest » jQuery method progress up the DOM tree, if you want to find a child, you have to use the « children » or the « find » method.

Upvotes: 1

Krzysiek
Krzysiek

Reputation: 2495

jQuery('#docLocked').click(function () {
        jQuery(this).find('span').removeClass('iconfa-lock').addClass('iconfa-unlock');
    });

Upvotes: 1

aarryy
aarryy

Reputation: 502

According to documentation

Description: For each element in the set, get the first element that matches the selector by testing the element itself and traversing up through its ancestors in the DOM tree.

closes finds ancestor. You should use .find() instead

try 

$(this).find('span')

Upvotes: 3

Lee Meador
Lee Meador

Reputation: 12985

Try this:

jQuery('#docLocked').click(function () {
    jQuery(this).find('span').removeClass('iconfa-lock').addClass('iconfa-unlock');
});

find() will look withing the element and find the, in this case, child of the <a> tag that is a <span>.

Notice how you can also chain the removeClass and the addClass since each returns the same elements it was passed.

Upvotes: 1

Related Questions