jQuery, get ID of each element in a class using .each?

Question

I'm trying this to get the id of each element in a class but instead it's alerting each name of the class separately, so for class="test" it's alerting: t, e, s, t... Any advice on how to get the each element id that is part of the class is appreciated, as I can't seem to figure this out.. Thanks.

$.each('test', function() { 
   alert(this)
});

Dariodariole

Answer 1

Try this, replacing .myClassName with the actual name of the class (but keep the period at the beginning).

$('.myClassName').each(function() {
    alert( this.id );
});

So if the class is "test", you'd do $('.test').each(func....

This is the specific form of .each() that iterates over a jQuery object.

The form you were using iterates over any type of collection. So you were essentially iterating over an array of characters t,e,s,t.

Using that form of $.each(), you would need to do it like this:

$.each($('.myClassName'), function() {
    alert( this.id );
});

...which will have the same result as the example above.

Whimsicality

thanks, your answer is instructive! – Extraneous

Answer 2

patrick dw's answer is right on.

For kicks and giggles I thought I would post a simple way to return an array of all the IDs.

var arrayOfIds = $.map($(".myClassName"), function(n, i){
  return n.id;
});
alert(arrayOfIds);

Gaily

Indeed $.map() is very nice if an Array is desired. Although if I may express my personal bias, I'd do n.id instead of creating a new jQuery object for each iteration since it's a good deal more efficient. Just thought I'd mention it. :o) – Whimsicality

you're right patrick. no need for the extra $(). I have edited it. – Gaily

Answer 3

 $(document).ready(function () {
        $('div').each(function () {
            var id = $(this).attr('id');
            console.log(id);
        });
    });

Sphenogram