如何在页面调整大小(jQuery)上更改左侧属性

时间:2011-07-13 03:12:24

标签: javascript jquery resize element each

我的代码有点麻烦。我要做的是让这些元素的css属性'left'根据它当前左值的差异和页面调整大小的数量进行更新。这样,当页面调整大小并且背景移动时,元素也会移动。看看下面的代码,我将描述问题:

$(window).resize(function() {
    var docWidth = $(window).width();
    if (docWidth < 1000) {
        var difference = 1000-docWidth;
        $('#headNav a,#icons div').each(function() {
            var left = $(this).position().left;
            var newLeft = left - difference;
            $(this).css({ 'left' : newLeft });
        });
    }
});

所以我得到的问题是元素被赋予左数字的野数,而变量'newLeft'的值是合理的期望值。我认为每个函数都收集这些值的总和,并为每个元素运行它们x元素发现的次数(因此,如果有5个元素运行5次,我的意思是。)我想要的是这个代码执行每个元素都是唯一的,但每个元素只有一次,而不是每个元素10次! (这是html中有多少元素)。

所以我的问题是,如何实现这一目标?我希望我能够很好地解释自己,这很难迭代。非常感谢任何帮助。谢谢!

2 个答案:

答案 0 :(得分:2)

这是一个有趣的诀窍:在+=来电中加入.css()

$(this).css({left: "+=" + difference});

jQuery为您计算得到新值。

答案 1 :(得分:1)

试试这个:

$(window).resize(function() {
    var docWidth = $(window).width();
    if (docWidth < 1000) {
        var difference = 1000-docWidth;            
        $('#headNav a,#icons div').each(function(iconInst) {
            var left = $("#" + iconInst).position().left;
            var newLeft = left - difference;
            $("#" + iconInst).css({ 'left' : newLeft });
        });
    }
});