Question

我正在试图弄清楚如何做到这一点：

我有一个这样的div列表，但我不知道我可以拥有多少项

<div class="myClass" id="one"></div>
<div class="myClass" id="two"></div>
...
<div class="myClass" id="last"></div>

我想设置那些的绝对位置，每个都取决于先例（你可以把它们想象成一条线）。例如：

$('#one').offset({ top: 0, left: 0 });
$('#two').offset({ top: 0, left: ($('#one').width())+50 });

...

我想象通过这样做我可以知道他们的数字：

var itemNumber = $('#container').find('.item').size();

然后做一个'for'循环，如：

    for (var a = 0; a < itemNumber; a++) {
    $('.myClass').offset({ ... });
}

你可以看到我被卡住了，因为我的周期必须考虑先前元素的位置。好吧，所有的div都有相同的大小。

想法？

Answer 1

$.index()非常方便：

var itemNumber = $('#container').find('#two').index();

请注意，上面的内容将返回1，因为JavaScript数组从0开始。

Answer 2

您可以使用.each()循环播放与slector匹配的所有项目：

$('.myClass').each(function(i) { });

您可以使用以下方式计算下一个位置：

(width of the item + 50) * i

或者如果项目不均匀，您可以使用累计值创建变量。每次添加宽度。

Answer 3

不确定为什么你不会用CSS做这个，但是使用jQuery，你可以......

使用.each()
从第二个元素开始，回顾前一个元素，
通过将之前的left添加到之前的left

width

var elems = $('.myClass');

elems.each(function( i ) {
    var prev = elems.eq( i-1 );
    $(this).offset({
        top: 0,
        left: i ? prev.width() + prev.offset().left : 0;
    });
});

如何在未定义数量的元素列表上设置位置

3 个答案: