Question

如何使用索引号重新排序元素？

例如，如果我有一个列表

<ul>
   <li data-name="tree"></li>
   <li data-name="park"></li>
   <li data-name="house"></li>
   <li data-name="fountain"></li>
</ul>

如何使用数字将'house'移动到第一位？我可以使用index()获取列表项的从零开始的索引，但我无法将该元素移动到特定索引。

示例：

$("[data-name='house']").moveTo(1);

Answer 1

您需要使用.insertBefore()和.eq()方法。

eq()方法将匹配元素集减少到指定索引处的元素。

请试试这个：

$('[data-name=house]').insertBefore($('li').eq(0));

Answer 2

这是一个可能有帮助的片段。提供给moveTo的偏移量是在剩余的子节点中插入元素的位置（0 =第一个）。依赖于insertBefore或类似函数的解决方案更简单，但此版本的moveTo应该用于将元素移动到任何位置（包括在第一个子节点之前或之后）并且应该处理特殊情况将唯一的孩子移动到零位而不会导致错误。

$.fn.moveTo = function(i) {
    var p = this.parent()
    var c = this.detach()
    var cs = p.children()
    cs = [].concat(cs.slice(0,i), c.get(), cs.slice(i))
    p.html(cs)
}

var i = 0;
var next = function() {
  if (++i > 3) { i = 0 }
  $('[data-name="tree"]').moveTo(i)
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul>
   <li data-name="tree">tree</li>
   <li data-name="park">park</li>
   <li data-name="house">house</li>
   <li data-name="fountain">fountain</li>
</ul>
<button onclick="next()">Move</button>

使用索引号订购元素

2 个答案: