Get html value from object within an array

Question

I have an exemplary JavaScript code snippet. What I'm trying to achieve here is getting html, and id attribute value from an object within the array

var swatches = $(".swatchColor");
for (var i = 0; i < swatches.length; i++) {
     var value = parseInt(swatches[i].html());
     if (!isNaN(value)) {
         alert(swatches[i].attr("id"));
     }
};

but for some reason I get Uncaught TypeError: undefined is not a function error when swatches[i].html() is executed. Why does it happen?

Try `$(swatches[i]).html()`. As noted below though, `.each()` is the more common way of accomplishing this. — Patrick Q, Jun 24 '14 at 15:59
If you're using jQuery, you should consider using its [each method](https://api.jquery.com/each/). — pdoherty926, Jun 24 '14 at 15:59

score 3 · Accepted Answer · edited May 23 '17 at 10:32

3

The jQuery class selector does not provide an array of node elements for you to iterate through.

From this answer, you need to do the following to iterate through all of the nodes:

$(".swatchColor").each(function(i, obj) {
    var value = parseInt($(obj).html());
    //etc...
});

edited May 23 '17 at 10:32

Community

1
1

answered Jun 24 '14 at 15:59

Kodlee Yin

1,089
5
10

That eventually worked for me, but had to change it to: var value = parseInt($(obj).html()); Please consider updating your answer, will mark it as an answer – Bartosz Jun 24 '14 at 16:06
`obj` is a DOM element, not a jQuery object. Your answer has the same problem as the original question. – Andrew Whitaker Jun 24 '14 at 16:16

Get html value from object within an array

1 Answers1