jQuery foreach loop, multiple css values?

Question

I am trying to loop .each() css value. I just know how to get the index. Fiddle

var pos = $('.sublayer_1 div').css('left');

    function adjustAttempt3() {

        $(".sublayer_1  div").each(function (index) {
             alert(index + ":" + pos);
        });

     }

The idea I am going for is saving the left value, because when the browser is under 800px the jQuery code I wrote changes the left position, when the browser is resized back above 800px I want to resort back to the default left value.

FYI css is NOT a solution, because the left value is from the database and is dynamic.

This is why I am trying to store each left position and use that in an if statement.

Here is some sample html code, take a look at this fiddle for more.

<div class="sublayer_1">
    <div style="position: absolute; left: 100px;">Coffee</div>
    <div style="position: absolute; left: 300px;">More Coffee</div>
</div>

Side Note: More on what I mean by saving the orig left position

    if((w) > 800) {
        $Q('#main').css({'margin-top': mar });
        $Q('.sublayer_1 div, .sublayer_1 img').css(pos);
        alert(pos) 
    }
    else { 
        $Q('.sublayer_1 div, .sublayer_1 img').css({'left': w/2});
        $Q('#main').css({'margin-top': w_d + m_d });           
    }

This if statement is wrapped in a function which is called in a resize function. The variables in the if((w) > 800) statement are outside the function picking up the default values while the variables inside the else statement are within the resize function so that they are dynamic.

As far as practices go, IDK how this rates, but it just came to me and works, but I am having trouble getting each left value, which is why I ask what I did above.

Answer 1

I would store the original CSS value via .data for each element:

$(".sublayer_1  div").each(function() {
    $(this).data('origLeft', $(this).css('left'));
});

If you generate the HTML dynamically, you don't even have to make this call, you could store the value directly in the HTML:

<div style="position: absolute; left: 100px;" data-orig-left="100px">Coffee</div>

Then you can get it later with:

$(".sublayer_1  div").each(function() {
   var left = $(this).data('origLeft');
});

Answer 2

Within the function passed to each use $(this) to retrieve the current element, then obtain its left value.

function adjustAttempt3() {

     $(".sublayer_1  div").each(function (index) {
         alert(index + ":" + $(this).css("left"));
     });  
}

JsFiddle: http://jsfiddle.net/vGQXT/6/