使用jQuery將多個元素屬性保存到數組中

新手在這裏！我的問題如下：我有一個動態填充ul，其中每個li項目包含5個絕對定位的內部div。像這樣：使用jQuery將多個元素屬性保存到數組中

<ul id="slider"> 
<li class="slide"> 
    <div class="pic1"></div> 
    <div class="pic2"></div> 
    <div class="pic3"></div> 
    <div class="pic4"></div> 
    <div class="pic5"></div> 
</li> 
<li class="slide"> 
    <div class="pic1"></div> 
    <div class="pic2"></div> 
    <div class="pic3"></div> 
    <div class="pic4"></div> 
    <div class="pic5"></div> 
</li> 
//more li items... 
</ul>

這些絕對定位的div中的每一個都使用兄弟的高度來計算jQuery的最終位置。水平（左，右）屬性直接通過CSS應用。我試着用每個PIC類的每一個方法來設置CSS，像這樣的例子：

var pic2 = new Array(); 
$('.slide .pic2').each(function(i) { 
    pic2.push($(this).siblings('.pic1').find('img').height(); 
    $(this).css({ top : pic2[i] + 10 }); 
}); 

var pic4 = new Array(); 
$('.slide .pic4').each(function(i) { 
    pic4.push($(this).siblings('.pic3').find('img').height(); 
    $(this).css({ top : pic4[i] + 10 }); 
});

但我想一定要做到這一點更簡單，更緊湊的方式，因爲這似乎太複雜，也它打破了IE7和IE8，我注意到了。也許是一個for循環，例如將創建一個多維數組，並將根據某些if語句或可能使用.position方法將css應用於每個項目？有任何想法嗎？謝謝！

----編輯補充回答未來的新手像我這樣的：

使用Shasteriskt的回答，我能夠根據類簡化我的醜各功能，也可以添加一些參數，如：

$('.slider li').children('div').each(function(i,picItem){ 
     if ($(this).hasClass('pic2')) { 
      var top = $(picItem).prev().find('img').height(); 
      $(picItem).css({top: top + 100}); 
     } 
     if ($(this).hasClass('pic5')) { 
      var top = $(picItem).prev().find('img').height(); 
      $(picItem).css({top: top + 60}); 
     } 
     else { 
      var top = $(picItem).prev().find('img').height(); 
      $(picItem).css({top: top + 10}); 
     } 
    });

謝謝Shasteriskt！很多巧克力餅乾給你！ :)

來源

2012-04-01 Krysta

爲什麼不乾脆讓CSS的位置沒有任何的js的元素？例如：'.slide div {margin-top：10px;}' – 2012-04-01 16:17:09

由於我使用的網格設計非常具體，因此基於div的高度和寬度進行絕對定位。雖然現在你已經這麼說了，但是讓我懷疑我是否嘗試過這樣做！大聲笑讓我檢查，我會告訴你;） – Krysta 2012-04-01 16:24:08

我知道你可能有一個嚴格的網格，但既然你沒有在你的問題中指定，我想我試了一下 – 2012-04-01 16:29:41

你需要將每個值推入數組的任何理由？除非你需要使用它，否則我不認爲你真的需要它。

，您可以簡化這個如下：

$('.slider li').children('div:odd').each(function(i,picItem){ 
     var top = $(picItem).prev().find('img').height(); 
     $(picItem).css({top: top + 10}); 
    });

來源

2012-04-01 16:22:57

這實際上有點作品！唯一的是，就像我上面告訴Gion的那樣，我的網格是一個非常具體的設計，所以某些項目的頂部位置並不是根據立即在頂部的div，而是緊挨着它的一個div ...（所有div都有用CSS設置不同的寬度，根據高度在網格上的順序有什麼變化）。是否可以添加不同的if語句到你發佈的內容，比如說，「如果這是pic3，那麼picitem.css是top + 80」？我很抱歉，如果這個問題很愚蠢，我是jQuery的新手，所以我現在只是教我自己用它做漂亮的事情:) – Krysta 2012-04-01 16:47:25

你可以通過做'if（$（picItem）.hasClass（' .pic2'））{// do something}'來檢查當前哪個div在循環中。 – 2012-04-02 08:19:21

使用jQuery將多個元素屬性保存到數組中

回答

相關問題