6

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!

1
  • If the AJAX call is inside the handler, this should be correct. If you are calling another function, you need to pass datearray as a argument, or simply create the variable outside the handler. See my answer below. Commented Jun 9, 2010 at 17:49

6 Answers 6

12

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.

Sign up to request clarification or add additional context in comments.

8 Comments

@Pointy - I loooove map()! Just don't forget to chain .get() at the end, otherwise datearray will contain a jQuery object instead of just the array.
Oh right; thanks @patrick! Don't you wish jQuery had a "reduce" in the core too?
@Pointy - You know, the only time I've come across (or thought about) reduce was when I was tinkering with CouchDB a bit. It is an interesting bit of functionality.
Example: what if you want a map of "id" to "value"? With "reduce", it'd be like this map example except you'd start with {} and add the mapping for each element. Using Prototype, you get used to it pretty quickly and it simplifies a lot of situations.
@Pointy - Nice. I just looked at a couple of examples online. So the first argument passed would be {}, and you update it with each iteration? Or do you create a variable external to the reduce callback, and update that, like you would with each()?
|
4

Try with jquery's map function:

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

// use ajax to send datearray

2 Comments

The code = new Array() in the first line is unnecessary. The second statement replaces the array.
Same comment I gave Pointy. If you don't chain .get() at the end of .map(), datearray will contain a jQuery object instead of just its array.
1

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

1 Comment

This is true. Any function created within another has scope to the containing functions variables. As such after the each runs you will have your data in datearray and you can just pass datearray into your ajax function.
1

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.

Comments

0

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

Comments

0

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

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

Comments

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.