使用索引号的订单元素

Question

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

例如，如果我有使用数的列表

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

我如何才能将“房子”，以第一名？ 我可以通过使用index()获得列表项的从零开始的索引，但我无法将元素移动到特定索引。

例子：

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

Answer 1

这里有一个片段，可能会有帮助。提供给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>

Answer 2

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

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

请试试这个：

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