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.

From the .css documentation: "Get the value of a style property for the first element in the set of matched elements" — Felix Kling
– Felix Kling, Commented Aug 20, 2013 at 8:51
What? I really don't understand what the question is here. Are you wanting to loop through an element's CSS properties? Where each iteration of each() passes {left:'100px'} or something? — MDEV
– MDEV, Commented Aug 20, 2013 at 8:51
I can't really tell what you're asking. But are you looking for this -- that's how you access the elements inside the each loop, $(this) to access the jquery extended element. — Ben Lee
– Ben Lee, Commented Aug 20, 2013 at 8:51
Why not store the original left value in an extra attribute on each element e.g. <div style="position: absolute; left: 100px;" data-original-left="100">Coffee</div>? — gvee
– gvee, Commented Aug 20, 2013 at 8:52
@gvee good idea, I have use data values to store info before, let me wrap my head on if it works well with this project I am working on, ill come back to this in a second.. Ill have to see how I can work it in with the if statement. — Mike
– Mike, Commented Aug 20, 2013 at 8:55

Felix Kling · Accepted Answer · 2013-08-20 08:53:08Z

3

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');
});

answered Aug 20, 2013 at 8:53

Felix Kling

820k181 gold badges1.1k silver badges1.2k bronze badges

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

1 Comment

Mike Over a year ago

Ah ok, this makes sense of what @gvee was talking about above, I like it. This should tie in nicely and is a really good method that allows some flexibility. Bravo

Kevin Bowersox · Accepted Answer · 2013-08-20 08:51:27Z

1

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/

answered Aug 20, 2013 at 8:51

Kevin Bowersox

94.6k19 gold badges164 silver badges198 bronze badges

3 Comments

Felix Kling Over a year ago

In that case, why not use $(this) instead of pos.eq(index)?

Mike Over a year ago

Yeah, I didn't know to use that there, honestly I am not always sure when to use $(this). I know to use it when inside a function and if you're trying to do something to the element of the function (not sure if I worded that properly) but I didn't know that it also helps loop. Arun said it well "it fetches the left value of first element satisfying the selector" that made sense of $(this) a little better for me but I am sure there is still a lot more it can be used for..

Kevin Bowersox Over a year ago

@Mike the each function will call the anonymous function provided for each selected element, setting this to the current element for each iteration

Arun P Johny · Accepted Answer · 2013-08-20 08:51:46Z

1

When you say var pos = $('.sublayer_1 div').css('left'); it fetches the left value of first element satisfying the selector, what you need is in your each loop you want the position of the currently looping element, so

it should be

function adjustAttempt3() {
    $(".sublayer_1  div").each(function (index) {
        var pos = $(this).css('left');
        alert(index + ":" + pos);
    });
}


//Attempt 3
adjustAttempt3();

Demo: Fiddle

answered Aug 20, 2013 at 8:51

Arun P Johny

389k68 gold badges532 silver badges532 bronze badges

2 Comments

Mike Over a year ago

You know what I did it like this on attempt 4, except I didnt use $(this). My only concern with this is how do I store the original left value, im sure its easy its hard to explain myself in this comment, but look at the OP there is a resize function, and I need to store the default value outside of the resize, does that make sense? lol Could I write this as a variable, or a function and pass the function inside my resize func?

Mike Over a year ago

Oh yeah okay, I didnt realize it was a combination of the two, I got so many fast answers I was trying to respond and wrap my head around it all. I see that he does use a .data and $(this) thanks for answering all my questions. I see you helping out a lot, thanks. I want to cram all this info and become an expert one day :)

Alvaro · Accepted Answer · 2013-08-20 08:51:50Z

1

You are only getting the left position for the first div as you are not iterating to get it.

Try this:

function adjustAttempt3() {

     $(".sublayer_1").find('div').each(function (index) {
         var pos = $(this).css('left');
         alert(index + ":" + pos);
     });


}

Live example: http://jsfiddle.net/vGQXT/3/

answered Aug 20, 2013 at 8:51

Alvaro

41.7k31 gold badges174 silver badges352 bronze badges

1 Comment

Mike Over a year ago

Yeah this is it, similar to Aruns answer, not sure who was first, but I scrolled to the bottom and might have passed this up, thanks.

Collectives™ on Stack Overflow

jQuery foreach loop, multiple css values?

4 Answers 4

1 Comment

3 Comments

2 Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

1 Comment

3 Comments

2 Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related