only first element in jquery each loop getting updated

Question

Hi I am just trying to do an each loop on elements containing the class front but only first element is getting updated for some reason please help. May be it is a silly mistake but i am unable to find it.

jsfiddle:

http://jsfiddle.net/sVTCK/7/

HTML:

<div class="wrapper">
    <div class="front"></div>
    <div class="front"></div>
    <div class="front"></div>
    <div class="front"></div>
    <div class="front"></div>
    <div class="front"></div>
</div>

jquery:

function setSlide(rows, dimension) {
    var topPos = 0;
    var leftPos = 0;
    $(".front").each(function(i, e) {
        topPos++;
        if (i % rows === 0) {
            topPos = 0;
            leftPos++;
        }
        var position = topPos * dimension + " " + (leftPos - 1) * dimension;
        e.style.backgroundPosition = position;  
        e.innerHTML =  e.style.backgroundPosition;
    });
}
setSlide(3,200);

css:

.front{
    width:200px;
    height:200px;    
    background:url(some image);
    border:1px solid black;
    float:left
}

.wrapper{
    overflow:hidden;
    width:610px;    
}

do you want only add the dimension at squares?

user3401335
– user3401335

2014-03-29 11:57:31 +00:00
Commented Mar 29, 2014 at 11:57 — user3401335
– user3401335, Commented Mar 29, 2014 at 11:57
That would be image in end product

Susheel Singh
– Susheel Singh

2014-03-29 12:09:18 +00:00
Commented Mar 29, 2014 at 12:09 — Susheel Singh
– Susheel Singh, Commented Mar 29, 2014 at 12:09

xdazz · Accepted Answer · 2014-03-29 11:57:14Z

5

function setSlide(rows, dimension) {
    var topPos = 0;
    var leftPos = 0;
    $(".front").each(function(i, e) {
        topPos++;
        if (i % rows === 0) {
            topPos = 0;
            leftPos++;
        }
        var position = topPos * dimension + 'px ' + (leftPos - 1) * dimension +'px';
        e.style.backgroundPosition = position;  
        e.innerHTML =  e.style.backgroundPosition;
    });
}
setSlide(3,200);

THE WORKING DEMO.

answered Mar 29, 2014 at 11:57

xdazz

161k38 gold badges255 silver badges278 bronze badges

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

1 Comment

Niet the Dark Absol Over a year ago

To explain, positions (and lengths in general) need units. Unless they're zero, which is why your first element was working.

vimes1984 · Accepted Answer · 2014-03-29 12:23:26Z

1

ok I've refractored the javascript stlightly into jquery since your using it and moved from the vanilla javascript:

function setSlide(rows, dimension) {
    var topPos = 0;
    var leftPos = 0;
    var front = $('.front');
    $.each(front, function(index, val) {
        topPos++;
        if (index % rows === 0) {
            topPos = 0;
            leftPos++;
        }
        var position = topPos * dimension + "px, " + (leftPos - 1) * dimension + 'px';
        $(this).css('backgroundPosition', position);
        $(this).append(position);
    });
}
setSlide(3,200);

http://jsfiddle.net/sVTCK/18/

If you can tell us what your trying to do with the if statement it would help to add the background-position... You should be reallying on jQuery if you have it in page since it'll be quicker and you should also be caching your variables

edited Mar 29, 2014 at 12:23

answered Mar 29, 2014 at 11:57

vimes1984

1,6933 gold badges27 silver badges59 bronze badges

2 Comments

Susheel Singh Over a year ago

You are wrong. see inspect element only first element is getting updated. Above answer is the correct one. I forgot "px"

vimes1984 Over a year ago

read what i said.... I mentioned the if statement and the background position. It's also rather arrognat of you just to brush of someones effort and time taken. Try to be a little more humble when asking for help

Collectives™ on Stack Overflow

only first element in jquery each loop getting updated

2 Answers 2

1 Comment

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related