2012-01-06 87 views
1

我試圖找出如何做到這一點的不確定數量的名單上的位置:如何設置元素

我有這樣的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 (var a = 0; a < itemNumber; a++) { 
    $('.myClass').offset({ ... }); 
} 

正如你所看到的,我被卡住了,因爲我的週期必須考慮先例元素的位置。而且,所有div都具有相同的大小。

想法?

+0

你絕對應該能夠做到這一點沒有絕對定位。 (哈哈,明白了嗎?)你想做什麼? – benesch 2012-01-06 00:58:27

回答

1

不知道爲什麼你會不會用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; 
    }); 
}); 
+0

@PeeHaa:同意並更新。 – 2012-01-06 01:06:09

+0

這是我需要的,謝謝! – Daniele 2012-01-06 08:43:00

1

$.index()是非常方便的在這裏:

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

請注意,以上將返回1,如JavaScript數組從0

1

開始可以使用.each()循環,雖然所有項目符合其slector:

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

,並且可以使用計算下一個位置:

(width of the item + 50) * i 

或者,如果項目不是均勻大的,您可以使用累積值創建一個變量。每次添加寬度。