CODEWITHSUNDEEP
jquery
Evik James
Evik James

Reputation: 10483

How to use each() to loop through and get values?

I am using jQuery 1.4.3.

I have some divs that have microdata in them and I am trying to access them via jQuery in a loop. These divs will output much like rows and columns.

<div data-row="1" data-col="1">
<div data-row="1" data-col="2">
<div data-row="1" data-col="3">

<div data-row="2" data-col="1">
<div data-row="2" data-col="2">
<div data-row="2" data-col="3">

<div data-row="3" data-col="1">
<div data-row="3" data-col="2">
<div data-row="3" data-col="3">

I am trying to loop through each row and get the maximum height of each div in that row (although I am not doing exactly that with this code). With this code, I just want to be able to loop through how ever many rows there are.

This works and will produce three alerts of "1":

// ACCESS THE HEIGHT OF EACH CELL
$("[data-row='1']").each(function() {
    var R = $(this).attr("data-row");
    alert(R);
});

What I expect to see when this runs is three alerts of "1", followed by three alerts of "2", followed by three alerts of "3". I do not get any errors when the code "runs". No alerts are thrown. This does NOT work:

$("[data-row>='1']").each(function() {
    var R = $(this).attr("data-row");
    alert(R);
});

What's wrong with this piece of code? Why is it not finding any rows that have data-row value of 1 or greater?

Upvotes: 1

Views: 404

Answers (7)

twilson
twilson

Reputation: 2062

The correct signature is:

$("[data-row='1']").each(function(index, item) {
});

Sorry, forgot them, it was more the anonymous function signature that needed correcting.

Upvotes: -2

gen_Eric
gen_Eric

Reputation: 227200

HTML attributes are read as strings, not as ints. Also, according to the jQuery docs, attribute values should be quoted in selectors (as they are strings).

That is why $("[data-row=1]") doesn't work, and $("[data-row='1']") does.

$("[data-row>='1']") doesn't work because >= is not an attribute selector.

To get divs with data-row >= 1, you're gonna have to use filter, and check the value of data-row (p.s. you can do $("[data-row]") to get all divs with that attribute regardless of value).

$("[data-row]").filter(function(){
    return parseInt($(this).data('row'), 10) >= 1;
})

NOTE: jQuery can use .data to get data-* attributes, instead of .attr.

Upvotes: 1

Andrew Ensley
Andrew Ensley

Reputation: 11697

I don't believe jQuery has a selector for a value greater than or equal to something. I think what you want is this:

$("[data-row]").each(function() {
    var R = $(this).attr("data-row");
    alert(R);
});

Upvotes: 1

elclanrs
elclanrs

Reputation: 94101

How about:

$('[data-row=1], [data-row=2], [data-row=3]').each(function() {
    var R = $(this).attr("data-row");
    alert(R);
});

Upvotes: 0

Diodeus - James MacFarlane
Diodeus - James MacFarlane

Reputation: 114347

$("[data-row='1']") Only the first three rows match this selector.

Upvotes: 0

Justin Niessner
Justin Niessner

Reputation: 245399

You're seeing issues because >= is not a valid CSS Attribute Selector comparison. If you want to run the method for any element that has the attribute set, you could try:

$('[data-row]').each(function(){
    var R = $(this).attr('data-row');
    alert(R);
});

To see the valid attribute selectors, check out W3 - Attribute Selectors

Upvotes: 1

Sarfraz
Sarfraz

Reputation: 382666

Try:

$("[data-row]").each(function() {
    var R = $(this).attr("data-row");
    alert(R);
});

Because data-row is a whole attribute, you can specify just that to loop over all of them irrespective of what value it has.

Upvotes: 3

Related Questions