Can't do anything with elements retrieved w/ class selectors

Question

I'm trying to set a .click function for the first element with a certain class - and each one will need separate code, incrementing my purchase function, with the first one using purchase(0,0,1); and the second using purchase(0,1,1); and so forth. While doing so with $(".generation:first") (with generation being said class) works, I want to be able to do this for all elements with this class, referring to them from an array, and for some reason

$(".generation")[0].click(function () { purchase(0,0,1); });

doesn't work - no errors or anything. It just doesn't seem to select it. Just the same later:

// Note: listings is an array of three different classes, 0 is .generation
// Therefore, 'listings[0][0]' should be identical to '$(".generation")[0]'
listings[0][0].find(".count").text(game.buildings[type][id].count+" bought");

The above won't work, stating undefined is not a function, if I use .children(".count") it instead says object is not a function.

If you edit your question to explain how you want to do `purchase(0,0,1)` on element 0 and `purchase(0,1,1)` on element 1 and so on (like you indicated in your comment to Arun), then I can reopen your question because it will no longer be a duplicate of the one it's marked as. — jfriend00, Jun 03 '14 at 01:05

score 1 · Answer 1 · answered Jun 03 '14 at 00:57

1

You can just call the click function on the jQuery object to register the handler for all elements with the said class

$(".generation").click(function () { purchase(0,0,1); });

The problem is the .click() function is present in the jQuery object, but when you use $(".generation")[0] it returns a dom element reference which does not have the method thus you are getting the error.

In that case, you can find the index of the current element like

var $els = $(".generation").click(function () {
    purchase(0, $els.index(this), 1);
});

answered Jun 03 '14 at 00:57

Arun P Johny

384,651
66
527
531

The problem with that is each one needs a different one, for example, `$(".generation")[1]` would need to do `purchase(0,1,1);` instead... EDIT: Thanks for telling why this happened! – LukeZaz Jun 03 '14 at 00:58
@jfriend00 I don't think so - `If .index() is called on a collection of elements and a DOM element or jQuery object is passed in, .index() returns an integer indicating the position of the passed element relative to the original collection.` - is my understanding wrong? – Arun P Johny Jun 03 '14 at 01:04
I see. I didn't realize you were doing it on the jQuery object (I hadn't ever used it that way). OK now. I solved it a different way in my answer. – jfriend00 Jun 03 '14 at 01:06

score 1 · Accepted Answer · answered Jun 03 '14 at 00:58

You use .eq(0) to get the first element in a jQuery object. [0] just gets you the first DOM object which obviously doesn't support the jQuery .click() method of adding an event handler. So, you can do it like this:

$(".generation").eq(0).click(function () { purchase(0,0,1); });

If you want slightly different functionality for each .generation element as your comments now indicate, you can iterate with .each() and do something slightly different on each element.

$(".generation").each(function(index) {
    $(this).click(function() {
        purchase(0, index, 1);
    });        
});

Can't do anything with elements retrieved w/ class selectors

2 Answers2