jQuery .each() with Array

Question

Basically, I am trying to gather the IDs of every element with a specific class and place those IDs into an array. I'm using jQuery 1.4.1 and have tried using .each(), but don't really understand it or how to pass the array out of the function.

$('a#submitarray').click(function(){

    var datearray = new Array();

    $('.selected').each(function(){
        datearray.push($(this).attr('id'));
    });

    // AJAX code to send datearray to process.php file

});

I'm sure I'm way off, as I'm pretty new at this, so any advice help would be awesome. Thanks!

Answer 1

IT all looks good to me, the array will be populated and be available where you have placed the comment. Have faith in yourself.

Answer 2

You can use map() too:

$('a#submitarray').click(function(){

  var datearray = $('selected').map(function(_, elem) {
    return elem.id;
  }).get(); // edited to add ".get()" at the end; thanks @patrick
  // ajax

});

The map() method passes each index (which my example doesn't use) and element into the given function, and builds an array for you from the return values.

Answer 3

Try with jquery's map function:

datearray = $('.selected').map(function(){
    return $(this).attr('id');
}).get();

// use ajax to send datearray

Answer 4

You don't have to pass on the array to the anonymous function because it lives in the same scope.

Answer 5

The array should be loaded; you can send it to the server using jQuery.post...

$.post("process.php", datearray, function(dat) {
  alert('Response: ' + dat);
});

Answer 6

Building on the other answers, here is a simplified version:

var datearray = $('selected').map(function() {
  return this.id;
}).get();

The map function gets the id from each element, and the get function returns an array. Within the anonymous function passed to map, this refers to to each selected element in turn.