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

Question

示例如下:http://jsfiddle.net/KyW6c/2/

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

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

谢谢。

编辑:问题是每个列表项的左侧值和顶部值都设置为 0，因此它们都在左上角重叠。如果取消 jQuery 的注释，您就会看到问题。

编辑2:我发现如果我在设置 left 和 top 属性的同时没有将位置设置为绝对，它就能正常工作。

Answer 1

问题是当您迭代每个元素时，您设置了“position:absolute”，这会从定位中删除当前元素。当每个元素从布局中“删除”时，后面的元素会 float 到 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')
  });