jQuery foreach循环，多个css值？

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

我试图循环.each()css值。我只知道如何获得索引。小提琴

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.

我想要的想法是保存左值,因为当浏览器低于800px时,我写的jQuery代码改变了左边的位置,当浏览器调整回800px以上时我想恢复默认的左边值。

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

FYI css不是解决方案,因为左值来自数据库并且是动态的。

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

这就是为什么我试图存储每个左侧位置并在if语句中使用它。

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

这里有一些示例html代码,看看这个小提琴更多。

<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

侧注:更多关于保存orig左侧位置的含义

    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.

此if语句包含在调整大小函数中调用的函数中。 if((w)> 800)语句中的变量在函数之外,获取默认值,而else语句中的变量在resize函数内,因此它们是动态的。

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.

就实践而言,IDK如何评价,但它只是来找我并且有效,但我无法获得每个左值,这就是为什么我问我上面做了什么。

4 个解决方案

#1

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

我会通过.data为每个元素存储原始的CSS值:

$(".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:

如果您动态生成HTML,您甚至不必进行此调用,您可以将值直接存储在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');
});

#2

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

在传递给每个函数的函数内使用$(this)来检索当前元素,然后获取其左值。

function adjustAttempt3() {

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

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

#3

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

当你说var pos = $('。sublayer_1 div')。css('left');它取出满足选择器的第一个元素的左值,你需要的是你想要当前循环元素位置的每个循环,所以

it should be

它应该是

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


//Attempt 3
adjustAttempt3();

Demo: Fiddle

#4

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

你只是得到第一个div的左侧位置,因为你没有迭代得到它。

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/

实例:http://jsfiddle.net/vGQXT/3/

#1