How to looop through a jQuery element array and access data?

Question

I am using jQuery 1.7.2.

I have three checkboxes each with a unique company id. When one box is checked, I want to make a list of company ids created from the boxes that are checked.

<input type='checkbox' class='Company' data-companyid='1'> 1<br>
<input type='checkbox' class='Company' data-companyid='2'> 2<br>
<input type='checkbox' class='Company' data-companyid='3'> 3<br>

// SET BY CLASS
$Company = $("input.Company");

// GET COMPANY LIST 
function getCompanyList() {
    var len = $Company.length;
    for (i = 0; i < len; i++) {
         var CompanyID = $Company[i].data("companyid");
         alert(CompanyID);
    }
}
$Company.change(getCompanyList);

For some reason, I am having trouble accessing the company id via the data method in the loop. I have lots of examples of my own code where I do this sort of thing, but I can't get this one work.

What am I missing?

http://jsfiddle.net/Msc95/

$Company[i] gets the HTMLElement, you should be using $Company.eq(i). And the code in your jsFiddle is quite different from what you posted here... — MrOBrian
– MrOBrian, Commented Aug 24, 2012 at 19:05

Alnitak · Accepted Answer · 2012-08-24 19:11:41Z

2

You're not accumulating the individual company ID's into any sort of data structure.

The easiest way to return an array of values from an array of (checked) elements is to use jQuery's .map function:

function getCompanyList() {
    var companyList = $Company.filter(':checked').map(function() {
       return $(this).data('companyid');
    }).get();
    alert(companyList);
}

The .get() call is necessary to turn the result of .map() into a plain array.

See http://jsfiddle.net/alnitak/zfUXj/

edited Aug 24, 2012 at 19:11

answered Aug 24, 2012 at 18:57

Alnitak

341k72 gold badges420 silver badges503 bronze badges

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

2 Comments

Evik James Over a year ago

I have never used the map method. That looks really easy though.

Alnitak Over a year ago

@EvikJames FYI - map comes from functional programming languages such as LISP and Haskell. It transmogrifies one array into another array, by applying the supplied function to each element of the original array.

Roko C. Buljan · Accepted Answer · 2012-08-24 19:06:52Z

2

Why not something like this, and put them in an array?

var checkedCompanys = new Array();
 $('input.company:checked').each(function() {
     checkedCompanys.push($(this).data("companyid"));    
  });

Good luck

edited Aug 24, 2012 at 19:06

Roko C. Buljan

209k41 gold badges335 silver badges346 bronze badges

answered Aug 24, 2012 at 19:03

maxijb

5314 silver badges13 bronze badges

4 Comments

Alnitak Over a year ago

this is exactly what .map() is designed for - no need for push

Alnitak Over a year ago

@Roko you've unnecessarily re-evaluated the selector instead of re-using $Company

maxijb Over a year ago

Good explanation on why to use []... I'll try map and get too. Thanks

Roko C. Buljan Over a year ago

+1 @Alnitak :) my bad! jsfiddle.net/aGZCG/1 I used initially [] (Cause I always do, but re-copying the code I forgot to change to it)

Collectives™ on Stack Overflow

How to looop through a jQuery element array and access data?

2 Answers 2

2 Comments

4 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

4 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related