我在使用 jQuery 的 $(selector).each() 时遇到了困难

Question

此处示例：http://jsfiddle.net/KyW6c/2/

我有一个有序列表。每个列表项都是我的投资组合中的一个项目。我正在编写一些 jQuery，它将单击的列表项向上移动到有序列表的左上角。我已经完成了这项工作，但我遇到的问题是单击项下方的列表项正在移动。小提琴中提供了此代码（已注释掉）。

一旦加载页面，我尝试实施的解决方案会将每个列表项的位置设置为绝对位置，并将左右位置设置为有序列表中的当前位置。我不知道我是否遇到了麻烦，因为我误解了 .each() 的作用，或者只是如何实现它。

谢谢。

编辑：问题是每个列表项的 left 和 top 值都设置为 0，所以它们都只是在左上角重叠。如果取消注释 jQuery，就会发现问题。

编辑 2：我发现如果在设置 left 和 top 属性的同时不将位置设置为绝对，它可以正常工作。

Answer 1

问题在于，当您遍历每个元素时，您正在设置 'postion:absolute'，它正在从定位中移除当前元素。当每个元素都从布局中“移除”时，后面的元素会浮动到 0,0 位置。

通过自下而上的迭代，您可以先保存左/上，然后应用 postion:absolute 而不影响下一个元素：

  $($('.project').get().reverse()).each(function(){
    var pos = $(this).position();
    $(this).css({
      left: pos.left + 'px',
      top: pos.top + 'px',
      position: 'absolute',
      'z-index': '999'
    })
  });

  // your original code
  $('.project').click(function(){
    var $this  = $(this),
        left = $this.position().left + 'px',
        top  = $this.position().top + 'px';
    $this.css({
      left:      left,
      top:       top,
      position:  'absolute',
      'z-index': '999'
    }).animate({
      left:       0,
      top:        0,
      width:      '750px'
    }, 'fast', 'swing')
  }); 

Answer 2

http://jsfiddle.net/KyW6c/11/

在朋友的帮助下弄明白了。谢谢Matt！

Answer 3

$('.project').ready().each(..)

应该是

$('.project').each(..)

你可以试试这样的：

  var left = 0,
      top = 0;
$('.project').each(function(){
    var $this  = $(this),
    $this.css({
      left:      (left+10) + 'px',
      top:       (top+10) + 'px',
      position:  'absolute',
      'z-index': '999'
    })
  });