Question

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?

Answer 1

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.