How to position each element with a class identifier differently using jQuery?

Question

I'm pulling in two RSS feeds using simple pie and then adding a .pin for each feed post using a PHP foreach loop. I would like to position them so that each one appears 30px lower than the previous one. Here's my current attempt:

$( document ).ready(function() {
        for (x = 0; x < i; x++) {
            var position = 0;
            $('.pin').eq( x ).css('top', position + 'px');
            position = position + 30;
        };
    });

This isn't working, they all just appear on top of each other at the top of the page.

Any help would be great, thanks in advance!

Answer 1

The position is the same for each iteration of the loop and your assignment order is the wrong way around, finally i is nowhere to be found.

I think you might be looking for this. Considering i is valid.

        var position = 30 * x;
        $('.pin').eq( x ).css('top', position + 'px');

Answer 2

Position value is zero for all iteration. Move that line before the loop starts

Answer 3

Do away with the i and for . Since you are using jQuery, take advantage of .each :

var position = 0;
$(".pin").each(function () {
    $(this).css('top', position + 'px');
    position += 30;
});