CODEWITHSUNDEEP
jqueryhtml
Shackrock
Shackrock

Reputation: 4701

How to apply this jQuery function to a certain class only

$('a').each(function() {
    var clicked = false;
    $(this).bind('click', function() {
        if(!clicked) return !(clicked = true);
    });
});

Hi all. I'm trying to figure out how to apply this function to only <a> elements that also contain a class called touch. In other words:

function is applied to this:

<a href="#" class="touch">

function is not applied to this:

<a href="#">

Sorry, I'm a jQuery newb.

Upvotes: 0

Views: 1813

Answers (2)

James Allardice
James Allardice

Reputation: 165951

You need a class selector (combined with your current element selector):

$('a.touch').each(function() {
    var clicked = false;
    $(this).bind('click', function() {
        if(!clicked) return !(clicked = true);
    });
});

It's worth having a read through the jQuery API (in particular the selectors section). It will save you a lot of time later on!

It's also worth remembering that the majority of jQuery selectors are the same as the CSS selectors. If you know anything about CSS, you can apply that knowledge to jQuery too.

On a separate note, since most jQuery methods apply to every element in the matched set, you can probably get rid of your each loop. If I've understood correctly, you are trying to prevent every a.touch element from following the link the first time it is clicked. If that's right, then you can just do this:

$('a.touch').one("click", function() {
    return false; 
});

​

Upvotes: 4

Andy Gaskell
Andy Gaskell

Reputation: 31761

jQuery uses CSS selectors. Change your selector to $('a.touch') for anchor tags with the touch class or just $('.touch') for any element that has the touch class.

Upvotes: 2

Related Questions