每个列表项的增量

Question

我试图增加z-index每个列表项.

这是我到目前为止所尝试的:

    var photos = $('ul');
  photos.each(function () {

      var photos = $(this).children();
      var photosLen = photos.length;
      if (photosLen > 1) {
          photos.parent().addClass('album');
          var i = 0;
          while (i < photosLen) {

              $(this).children().css({
                  'z-index': i
              });
          }
      }

  });

我期望每个列表项都会从那里z-index: 1;开始z-index: 3;但是它没有这样做.只需将数组的长度添加到每个列表项.

HTML :(代码仅适用于第一个未排序的列表)

<ul>

    <li><img src="http://i.imgur.com/PuwwFs.jpg" alt=""></li>
    <li><img src="http://i.imgur.com/cjAGks.jpg" alt=""></li>
    <li><img src="http://i.imgur.com/zA4lCs.jpg" alt=""></li>

  </ul>
    <ul>

        <li><img src="http://i.imgur.com/PuwwFs.jpg" alt=""></li>


    </ul>

Answer 1

由于您已经在使用jQuery,因此代码可能很简单

  if (photosLen > 1) {
      photos.each(function(i) {
          $(this).css('zIndex', i);
      })
      .parent()
      .addClass('album');
  }

请注意属性each()的camelCase语法z-index