Suppose I have this:
<div id="apple" class="fruit"></div>
<div id="orange" class="fruit"></div>
<div id="grape" class="fruit"></div>
<div id="pear" class="fruit"></div>
How do I write a javascript function that can loop and print out all the fruit IDs with class "fruit"? Using JQuery.
$('div.fruit').each(function(){
//will loop through all divs with the class fruit.
$(this).attr('id'); //will give you the id of the current div
});
this.id will work as from the documentation "this == domElement". The each() callback will allow you to use two arguments, the first being the index in the result list, the second again being the dom element.
this.id would work too and would probably be more optimal since this is not being wrapped in a jQuery object inside each iterationAs printed out as comma separated list (ids is an array of the ids).
var ids = $.map($('div.fruit'), function(e) {
return e.id;
});
document.write(ids.join(','));
Working Demo - click on the output tab to see the output.
Using the following would cater for there being <div class="fruit"> with no id
var ids = $.map($('div.fruit'), function(e) {
return e.id? e.id : null;
});
this.id instead; or use a second argument to your callback function which will be the DOM element. Alternatively use $(this).attr('id').$('div.fruit').map(callback), which behaves as I mentioned (docs.jquery.com/Traversing/map#callback).