将元素更改为绝对位置

时间:2016-09-15 09:03:44

标签: javascript jquery html css

我想使用jQuery创建一组元素position:absolute,我编写了下面的代码。问题是,我无法将两个循环链接到一个偏移最终为每个元素返回相同值的循环。

$(navSelector + ' > li', this).each(function () {
    var position = $(this).offset().left - $(this).parent().scrollLeft();
    $(this).attr('data-absolute-position', (position + 5));
});

$(navSelector + ' > li', this).each(function () {
    $(this).css({
       'left': $(this).data('absolute-position'),
       'position': 'absolute'
    });
});

如果我将两个循环组合起来,position将为每个ul > li元素返回相同的值。我在这里做错了什么?

$(navSelector + ' > li', this).each(function () {
            var position = $(this).offset().left - $(this).parent().scrollLeft();
            $(this).attr('data-absolute-position', (position + 5)).css({
                'left': $(this).data('absolute-position'),
                'position': 'absolute'
            });;
        });

很抱歉,但HTML有点复杂,我找到了解决问题的方法。我只是添加了一个setTimeout并且更改正常! Bt我不确定的是,这是否是最好的方法呢?

$(navSelector + ' > li', this).each(function(){
            var el = $(this);
            var curPos = el.offset().left - el.parent().scrollLeft();
            var absPos = curPos + 5;

            el.attr('data-absolute-position',absPos);

            setTimeout(function(){
                el.css({
                    'left': absPos,
                    'position': 'absolute'
                });
            },0);

        })

2 个答案:

答案 0 :(得分:1)

我不确定你想说什么。

可能你可以尝试找出你的总数,然后在每个函数中执行for循环并返回值。

答案 1 :(得分:0)

小提琴会有所帮助。但是根据我对你的要求的理解,你不能把它链在一条线上。您需要按如下方式进行拆分:

$(this).attr('data-absolute-position', (position + 5)).css({
                'left': $(this).data('absolute-position'),
                'position': 'absolute'
            });;

使用您提供的以下代码,可能无法正确查找并将css效果应用于元素。

{{1}}