Increment attr value using jquery .each()

Question

I'm using impress.js for a presentation and instead of using it for fancy stuff, I just want the slides to be 900px apart from each other. I may need to add/delete slides depending on the length of my presentation and instead of changing each data-y value, I'd like to use jQuery to loop through each of my slides and add 900px to each slide position. Here's the jQuery I'm using:

var counter = 0;
$('.slide').each(function(){
    var posY = counter * 900;
    $(this).attr("data-y", posY);
    counter++;
});

But it's not adding the value to the data-y attribute in my html. I believe the code is right, I'm just not sure why it's not working.

How do you inspect your HTML??? Are you calling this snippet once elements `.slide` are available in the DOM? — A. Wolff, Jun 05 '14 at 15:53

Murali Murugesan · Answer 1 · 2014-06-05T16:00:11.353

2

Try with data() function for changing the data value

$(this).data("y", posY);

From Documentation

HTML5 data-* Attributes

As of jQuery 1.4.3 HTML 5 data- attributes will be automatically pulled in to jQuery's data object. The treatment of attributes with embedded dashes was changed in jQuery 1.6 to conform to the W3C HTML5 specification.

edited Jun 05 '14 at 16:00

answered Jun 05 '14 at 15:53

Murali Murugesan

22,423
17
73
120

Score! Thanks man. Works perfectly. Will mark as answer when the time limit is up. – stacigh Jun 05 '14 at 15:54
Wait, how is this supposed to update the HTML?! This set the property of data object, not the attribute – A. Wolff Jun 05 '14 at 15:55
@A.Wolff, he is trying to update the HTML 5 data object, so i suggested this and looks like it works for him – Murali Murugesan Jun 05 '14 at 15:56
@Murali I didn't read the question like this but i don't know impress.js so... Glad OP has found what **she** was looking for... :) – A. Wolff Jun 05 '14 at 15:58
Dangit! It's actually not working. Just hard refreshed and nothing. – stacigh Jun 05 '14 at 15:59
As I look at the source, the jQuery is working because the data-y value does increment by 900 each time. I just doesn't work like it would if I manually set the values. – stacigh Jun 05 '14 at 16:11
Since you're changing the data value after page load, I'm guessing you'd have to run the impress.js initialiser again or it won't pick up the new data attributes – Jonathon Blok Jun 05 '14 at 16:16

score 1 · Answer 2 · answered Jun 05 '14 at 15:58

1

To do this in less code, use the index of the each loop as your multiplier

$('.slide').each(function(i){
    var posY = i * 900;
    $(this).data("y", posY);
});

answered Jun 05 '14 at 15:58

Jonathon Blok

749
4
14

$('.slide').each(function(i){ $(this).data("y", (i*900)); }); – halabuda Jun 05 '14 at 16:02
There's making code more efficient, and there's making code unreadable. I prefer the efficient way. – Jonathon Blok Jun 05 '14 at 16:06
@JonathonBlok its perfectly readable with whitespacing, but its stripped out of comments. – halabuda Jun 05 '14 at 19:08
@halabuda fair enough, I didn't pick up on that – Jonathon Blok Jun 06 '14 at 08:48

Increment attr value using jquery .each()

2 Answers2