Loop through array of elements, replace html with data

Question

I have a table where each row contains several ratings, 5 of which need to be blanked when a certain action is taken and then the original rating put back in the when another action is taken. I've stored the original word in data, so my original line in HTML looks like this.

echo "<td data-Rating = $Rating class = 'outfieldlineuprating'>$Rating</td>";

In my JS, I find all the elements with 'outfieldlineuprating' like so..

SkillRatings = PlayerRow.find('.outfieldlineuprating');

It works up to this point (PlayerRow is fine). I know it works because when taking the first action (i.e blanking the elements), it works with ..

SkillRatings.html('----');

This puts ---- in all of the 5 elements with the 'outfieldlineuprating' class. Reversing it however, I'm struggling with. 'SkillRatings' at this point presumably contains some sort of array of the relevant td's, but I don't know how to loop through it, extract the data and insert that into the html. Here's what I'm trying but this doesn't work in JS.

for (var index = 0; index < SkillRatings.length; index++){
    Rating = SkillRatings[index].attr('data-Rating');
    SkillRatings[index].html(Rating);
}

This just gives the error : SkillRatings[index].attr is not a function

This is also a Jquery question. Can you add that tag as well? — Cengiz Araz
– Cengiz Araz, Commented Jun 28, 2016 at 16:13
Looks your code use jQuery, if is so try: $(SkillRatings[index]).attr. — Mario Santini
– Mario Santini, Commented Jun 28, 2016 at 16:14
Also thanks Mario, that fixed it. I need to swat up on the syntax of JQuery because I had it right apart from the syntax. — Farflame
– Farflame, Commented Jun 28, 2016 at 16:18

charlietfl · Accepted Answer · 2016-06-28 16:21:02Z

3

You are using jQuery and SkillRatings = PlayerRow.find('.outfieldlineuprating'); creates a jQuery object containing the elements.

SkillRatings[index] returns an actual element, not the jQuery object for that element

You would need to change SkillRatings[index].jQueryMethod() to

SkillRatings.eq(index).jQueryMethod(); 
// or 
$(SkillRatings[index]).jQueryMethod();

However this is easier done using SkillRatings.each which exposes this as the current element in the loop

Instead of using for loop try

SkillRatings.each(function(){
     // "this" is current element
     $(this).html( $(this).data('Rating'));
});

edited Jun 28, 2016 at 16:21

answered Jun 28, 2016 at 16:15

charlietfl

172k14 gold badges125 silver badges154 bronze badges

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

2 Comments

charlietfl Over a year ago

OK...there is a mismatch in question then between data-RatingData and data-Rating shown in your html.

Farflame Over a year ago

Yes you're right. Have updated question. Your answer is correct and the loop works. Thanks :)

Collectives™ on Stack Overflow

Loop through array of elements, replace html with data

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related