how to select my first child in jQuery

Question

I'm having a bit of trouble selecting the first child in jQuery. I'm trying to do this to avoid having LOTS of if statements. Basically, you click on a button. This class selector is setup to handle the click in my JS. Once you go into the JS, I want to get the child of the item that was just clicked, but I'm not having any joy.

Here's what I have in my JS:

$('.itemClicked').click(function(){

var id = $(this).attr('id').first();
    // it can't find the method first() here. If I just find the id, I get the 
    // correct ID of what I just clicked.          

var test = id.first();
    // I tried the above to seperate the ID from the first() method request
    // no joy with this either.

test.toggleClass("icon-tick");
    // this is my ultimate aim, to toggle this icon-tick class on the item
    // clicked.

});

Thanks in advance if you can help me out here. I'm probably just doing something stupid but I'm struggling to realise what that is.

Alnitak · Answer 1 · 2013-03-10T11:09:43.927

8

Your current version doesn't work because .attr('id') just returns the ID as a string, not a jQuery object. Also, .first() returns the first item from a jQuery collection, not their children.

So, you just want:

var test = $(this).children().first();

or:

var test = $('>:first-child', this);

or:

var test = $(this).children(':first');

or (on newer browsers):

var test = $(this.firstElementChild);

In a jsperf test with Chrome 25 the .firstElementChild method was incredibly fast, but it's not available on MSIE < 9. The .children().first()was the fastest portable option, and the>:first-child' method was very, very slow.

edited Mar 10 '13 at 11:09

answered Feb 13 '13 at 14:53

Alnitak

334,560
70
407
495

To be clear (as there is no concept such as "ID" in Javascript), his code is attempting to call a first() method on a string, is what attr() will return. – Jason M. Batchelor Feb 13 '13 at 14:56
@mori57 thanks - clarified – Alnitak Feb 13 '13 at 14:56

score 1 · Answer 2 · answered Feb 13 '13 at 14:54

1

Perhaps

$('.itemClicked').click(function(){
    $(':first-child',this).toggleClass('icon-tick');
});

is what you're after.

Live example: http://jsfiddle.net/ySMLG/

answered Feb 13 '13 at 14:54

Jamiec

133,658
13
134
193

I always forget that you can scope selectors like this. +1 for the reminder. :) – Jason M. Batchelor Feb 13 '13 at 14:57
this code doesn't work if there's more than one level of elements below the click element because `$(sel, this)` is equivalent to `.find()` and _not_ to `.children()`. – Alnitak Feb 13 '13 at 15:03

score -2 · Answer 3 · answered Feb 13 '13 at 14:58

-2

If all that you want to do is toggle the class "icon-tick" on the item that was click, then this will work:

$('.itemClick').click(function () {
    $(this).toggleClass('icon-tick');
});

The statement:

$(this).attr('id').first()

doesn't work because the attr() method returns the value of the attribute, not the jQuery object, so it is not chainable.

answered Feb 13 '13 at 14:58

James Tracy

40
4

OP clearly stated that they wanted to toggle the class on the *first child of the item clicked* – Jamiec Feb 13 '13 at 14:59
No, in fact, the comment in the OP's code states "this is my ultimate aim, to toggle this icon-tick class on the item clicked." Nevertheless, the question is not entirely clear, so I prefaced my answer with an "If..." – James Tracy Feb 13 '13 at 15:02
@JamesTracy but _everyone_ knows that comments become out-of-date within 5s of them being added to the code... – Alnitak Feb 13 '13 at 15:41

how to select my first child in jQuery

3 Answers3