4

这里的例子：http: //jsfiddle.net/KyW6c/2/

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

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

谢谢。

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

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

4

3 回答 3

2

问题是当您遍历每个元素时，您正在设置“位置：绝对”，它正在从定位中删除当前元素。由于每个元素都从布局中“删除”，因此以下元素浮动到 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')
  });
于 2012-05-07T06:11:46.527 回答
1

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

在朋友的帮助下弄明白了。谢谢，马特！

于 2012-05-07T13:39:18.210 回答
0 
$('.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'
    })
  });
于 2012-05-07T04:23:48.487 回答