使用jQuery将列表项移动到无序列表的顶部

Question

可以说我有以下无序列表

<ul>
 <li><a>Hank</a></li>
 <li><a>Alice</a></li>
 <li><a>Tom</a></li>
 <li><a>Ashlee</a></li>
</ul>

我正在寻找的是当我点击Tom时,它会移动(动画而不拖动)到列表的顶部(索引0).

我认为jquery可以排序,但我找不到以编程方式激活移动部件的方法.

Answer 1

发现这个更整洁:

$('li').on('click', function() {
    $(this).parent().prepend(this);
});?

实例

Answer 2

我想出了一个似乎运作良好的解决方案.这是一个概念证明,因此您可能需要对其进行一些修改,以便更好地适应您的具体情况.此外,我只在Firefox中测试过,但我没有看到为什么这在所有浏览器中都不起作用的原因.无论如何,这里是:

<script type="text/javascript">
  $(document).ready(function() {
    $('li').click(function() {
      // the clicked LI
      var clicked = $(this);

      // all the LIs above the clicked one
      var previousAll = clicked.prevAll();

      // only proceed if it's not already on top (no previous siblings)
      if(previousAll.length > 0) {
        // top LI
        var top = $(previousAll[previousAll.length - 1]);

        // immediately previous LI
        var previous = $(previousAll[0]);

        // how far up do we need to move the clicked LI?
        var moveUp = clicked.attr('offsetTop') - top.attr('offsetTop');

        // how far down do we need to move the previous siblings?
        var moveDown = (clicked.offset().top + clicked.outerHeight()) - (previous.offset().top + previous.outerHeight());

        // let's move stuff
        clicked.css('position', 'relative');
        previousAll.css('position', 'relative');
        clicked.animate({'top': -moveUp});
        previousAll.animate({'top': moveDown}, {complete: function() {
          // rearrange the DOM and restore positioning when we're done moving
          clicked.parent().prepend(clicked);
          clicked.css({'position': 'static', 'top': 0});
          previousAll.css({'position': 'static', 'top': 0}); 
        }});
      }
    });
  });
</script>

<ul>
 <li><a>Hank</a></li>
 <li><a>Alice</a></li>
 <li><a>Tom</a></li>
 <li><a>Ashlee</a></li>
</ul>

它计算单击LI和第一个之间的偏移差异,并LI通过将其设置position为relative动画并将动画设置为动画,将单击的一个向上移动到顶部top.同样,它会计算点击后留下多少空间,LI并相应地向下移动所有先前的空间.完成动画后,它会重新排列DOM以匹配新订单并恢复定位样式.

希望有所帮助!

Answer 3

假设:

<ul id="list">
 <li><a>Hank</a></li>
 <li><a>Alice</a></li>
 <li><a>Tom</a></li>
 <li><a>Ashlee</a></li>
</ul>

然后:

$("#list a").click(function() {
  $(this).parent().before("#list a:first");
  return false;
});

如果你想要制作动画,那就更难了.一种选择:

$("#list a").click(function() {
  $(this).parent().slideUp(500).before("#list a:first").slideDown(500);
  return false;
});

另外一个选项:

$("#list a").click(function() {
  var item = $(this).parent();
  var prev = item.prev();
  while (prev.length > 0) {
    item.before(prev);
    prev = item.prev();
  }
  return false;
});

但我怀疑你会以这种方式获得流畅的动画效果.