使用 jQuery 将多个元素属性保存到数组中

Question

新手来了！我的问题如下：我有一个动态填充的 ul ，其中每个 li 项目包含 5 个绝对定位的内部 div。像这样：

<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 类的 each 方法来设置 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 语句将 css 应用于每个项目，或者可能使用 .position 方法？有任何想法吗？谢谢！

---- 编辑为像我这样的未来新手添加答案：

使用 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！很多巧克力饼干给你！ :)

Answer 1

为什么需要将每个值推入数组？除非你以后需要使用它，否则我认为你真的不需要它。

您可以将其简化如下：

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