How to get all of the IDs with jQuery?

126,406

Solution 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)

Solution 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

Solution 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.

Solution 4

The best way I can think of to answer this is to make a custom jquery plugin to do this:

jQuery.fn.getIdArray = function() {
  var ret = [];
  $('[id]', this).each(function() {
    ret.push(this.id);
  });
  return ret;
};

Then do something like

var array = $("#mydiv").getIdArray();

Solution 5

It's a late answer but now there is an easy way. Current version of jquery lets you search if attribute exists. For example

$('[id]')

will give you all the elements if they have id. If you want all spans with id starting with span you can use

$('span[id^="span"]')
Share:
126,406
Roy Chan
Author by

Roy Chan

Updated on July 05, 2022

Comments

  • Roy Chan
    Roy Chan over 1 year

    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;

  • Shog9
    Shog9 almost 15 years
    @Deviant: true (although if you do that, you've made IDs kinda useless...) Another reason my example isn't suitable for production code is simply that it does no filtering of elements - if Roy has any spans without IDs, he'll end up with empty elements in the array.
  • Tschallacka
    Tschallacka over 8 years
    I use this function to get only the unique variables(screw duplicate id's, they won't work anyways on the second occurence) $.unique($('[id]').map(function() { return this.id; }).get()); By wrapping it in $.unique it gets nicely filtered keeping your code clean :-)
  • Mike
    Mike almost 8 years
    Try adding a bit of explanatory text to your answers.
  • Bruno de Oliveira
    Bruno de Oliveira almost 4 years
    Just complementing the answer, if you want to search all IDs from page using a certain string: $('*').each(function(){ if (/^stringhere/g.test(this.id)) { console.log(this.id) } });
  • Bruno de Oliveira
    Bruno de Oliveira almost 4 years
    Just a remember $.unique doesn't work with string nor numbers api.jquery.com/jQuery.unique
  • Jaseem Abbas
    Jaseem Abbas almost 3 years
    I owe you a coffee mate!