Question

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

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

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

感谢。

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

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

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

我对jQuery的$（选择器）.each（）有困难

3 个答案: