jQuery foreach循环,多个css值?

时间:2013-08-20 08:48:04

标签: jquery

我正在尝试循环.each() css值。我只知道如何获得索引。 Fiddle

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

    function adjustAttempt3() {

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

     }

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

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

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

以下是一些示例html代码,请查看此fiddle了解更多信息。

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

旁注: 有关保存原始左侧位置的更多信息

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

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

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

4 个答案:

答案 0 :(得分:3)

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

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

如果您动态生成HTML,您甚至不必进行此调用,您可以将值直接存储在HTML中:

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

然后您可以稍后使用:

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

答案 1 :(得分:1)

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

function adjustAttempt3() {

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

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

答案 2 :(得分:1)

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

应该是

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


//Attempt 3
adjustAttempt3();

演示:Fiddle

答案 3 :(得分:1)

您只获得第一个left的{​​{1}}位置,因为您没有迭代获得它。

试试这个:

div

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