我对jQuery的$(选择器).each()有困难

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

我有一个有序的清单.每个列表项都是我的投资组合中的项目.我正在写一些jQuery,它会将一个单击的列表项移动到有序列表的左上角.我已经完成了这个,但我遇到的问题是所点击的列表项目正在转移.此代码在小提琴中提供(注释掉).

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

谢谢.

编辑：问题是每个列表项的左侧和顶部值都被设置为0,因此它们只是在左上角重叠.如果你取消注释jQuery,你会看到问题.

编辑2：我发现,如果我在设置左侧和顶部属性的同时没有将位置设置为绝对,则它可以正常工作.

解决方法

问题是当你遍历每个元素时,你设置’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')
  });