使用索引號的訂單元素

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