使用jQuery更改元素顺序的最佳方法

Question

给定以下内容：

<a id="moveElementUp">Move Up</a>
<a id="moveElementDown">Move Dowm</a>

<div id="elementHolder">
    <a id="element-1">1</a>
    <a id="element-2">2</a>
    <a id="element-3">3</a>
    <a id="element-4">4</a>
</div>

<script type="text/javascript">
    function reOrder (el){
        // Change IDs of Elements to be Sequential
    }
    $('#moveElementUp').click(function(e){
        // Move Clicked Element Up One Spot in List

        reOrder();
    });
    $('#moveElementDown').click(function(e){
        // Move Clicked Element Down One Spot in List

        reOrder();
    });
</script>

使用jQuery，改变元素顺序并保持连续的ID序列，最优且最快的方法是什么？感谢您的帮助！

- dSquared

---

https://dev59.com/K3NA5IYBdhLWcg3wAItP - Riz

@dev 感谢您提供的链接；但是这似乎只是排序... 我想要实现的是在点击时更改顺序，然后将ID更改为匹配新顺序。 - dSquared

Answer 1

这将允许您任意重新排列项目。但是，它将删除锚标签之间的空格。您可以通过在锚标签之间添加空格（就像我在这里做的一样：http://jsfiddle.net/FqwDc/1/），或者使用嵌套的div来解决此问题。

var $sel; // anchor last clicked on
var prefixstr = "element-";

$('a[id^="'+prefixstr+'"]').click(function(e) {
    $sel = $(this);
});
$('#moveElementUp').click(function(e) {
    // Move Clicked Element Up One Spot in List
    $sel.prev().before($sel);
    changeIDs($('#elementHolder'));
});
$('#moveElementDown').click(function(e) {
    // Move Clicked Element Down One Spot in List
    $sel.next().after($sel);
    changeIDs($('#elementHolder'));
});

function changeIDs($j) { // renumber the IDs
    $j.children('a').each(function(i) {
        $(this).attr('id',prefixstr+i);
    });
}

- Blazemonger