Question

我有通过jQuery显示的下面的HTML，它是一个用户列表 - 但我试图找到一种方法来指定一个id名称，使相应的my_list div移动到订单的顶部？

示例：

using

如果我要指定Sam，将会变成以下内容：

<div class="my_list" id="peter"><label class="name">Peter - <div id="peter_status"></div></label></div>
<div class="my_list" id="sam"><label class="name">Sam - <div id="sam_status"></div></label></div>
<div class="my_list" id="derek"><label class="name">Derek - <div id="derek_status"></div></label></div>

我尝试创建一些代码来提供帮助，如下所示：

<div class="my_list" id="sam"><label class="name">Sam - <div id="sam_status"></div></label></div>
<div class="my_list" id="peter"><label class="name">Peter - <div id="peter_status"></div></label></div>
<div class="my_list" id="derek"><label class="name">Derek - <div id="derek_status"></div></label></div>

Answer 1

以下是一些相关的答案，通过谷歌搜索找到＆＃34; javascript重新排列div顺序＆＃34;：

Answer 2

您不需要太多的代码。鉴于您需要排序的每个元素都有其自己的ID，因此您可以轻松，可扩展地使用以下代码：

var order = ['sam','peter','derek'];
for (var i = 1; i < order.length; i++) {
    $('#'+order[i]).insertAfter('#'+order[i-1]);
}

这里有一个JsFiddle。

Answer 3

试试 JSFiddle demo 。

请注意，我们需要容器为您的div排序：

<div class="container">
    <div class="my_list" id="peter">
        <label class="name">Peter -
            <div id="peter_status"></div>
        </label>
    </div>
    <div class="my_list" id="sam">
        <label class="name">Sam -
            <div id="sam_status"></div>
        </label>
    </div>
    <div class="my_list" id="derek">
        <label class="name">Derek -
            <div id="derek_status"></div>
        </label>
    </div>
</div>

这个JS代码使用remove()和prepend() jQuery方法来解决这个问题：

var divId = 'sam';
$('button.sort-divs').on('click', function () {
    var divHtml = $('#' + divId).html();
    $('#' + divId).remove();
    $('.container').prepend(divHtml);
});

根据ID名称重新排列div顺序

3 个答案: