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类的每个方法来设置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});
   });

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

1 个答案: