How to get all of the IDs with jQuery?

Question

I am trying to gather a list (array) of ids in a sector

<div id="mydiv">
 <span id='span1'>
 <span id='span2'>
</div>

$("#mydiv").find("span"); 

gives me a jQuery object, but not a real array;

I can do

var array = jQuery.makeArray($("#mydiv").find("span"));

and then use a for loop to put the id attributes into another array

or I can do

$("#mydiv").find("span").each(function(){}); //but i cannot really get the id and assign it to an array that is not with in the scope?(or can I)

Anyhow, I just wanna see if there is a shorthand in jQuery to do that;

Answer 1

//but i cannot really get the id and assign it to an array that is not with in the scope?(or can I)

Yes, you can!

var IDs = []; $("#mydiv").find("span").each(function(){ IDs.push(this.id); }); 

This is the beauty of closures.

Note that while you were on the right track, sighohwell and cletus both point out more reliable and concise ways of accomplishing this, taking advantage of attribute filters (to limit matched elements to those with IDs) and jQuery's built-in map() function:

var IDs = $("#mydiv span[id]")         // find spans with ID attribute   .map(function() { return this.id; }) // convert to set of IDs   .get(); // convert to instance of Array (optional) 

Answer 2

The .get() method will return an array from a jQuery object. In addition you can use .map to project to something before calling get()

var idarray = $("#myDiv")
             .find("span") //Find the spans
             .map(function() { return this.id; }) //Project Ids
             .get(); //ToArray

Answer 3

My suggestion?

var arr = $.map($("#mydiv [id]"), function(n, i) {
  return n.id;
});

you could also do this as:

var arr = $.map($("#mydiv span"), function(n, i) {

or

var arr = $.map($("#mydiv span[id]"), function(n, i) {

or even just:

var arr = $("#mydiv [id]").map(function() {
  return this.id;
});

Lots of ways basically.