Сохранение нескольких свойств элемента в массив с помощью jQuery - PullRequest
Новая
       12

Сохранение нескольких свойств элемента в массив с помощью jQuery

0 голосов
/ 01 апреля 2012

Новичок здесь! Моя проблема заключается в следующем: у меня есть динамически заполненный 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. Я попытался использовать метод each для каждого класса 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, например, который создаст многомерный массив и будет применять CSS к каждому элементу в соответствии с определенными операторами if, или, возможно, с использованием метода .position? Есть идеи? Спасибо!

---- Редактировать, чтобы добавить Ответ для будущих новичков, таких как я:

Используя ответ Шастерискта, я смог упорядочить свои уродливые функции, а также добавить определенные параметры в соответствии с классом, например: 

$('.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});
      }
   });

Спасибо, Шастерискт! Много шоколадного печенья для вас! :)

1 Ответ

0 голосов
/ 01 апреля 2012

Есть ли причина, по которой вам нужно помещать каждое значение в массив?Если вам не нужно использовать его после, я не думаю, что вам это действительно нужно.

Вы можете упростить это следующим образом: 

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