Javascript / jQuery-重新排序div

Question

給出以下代碼：

<div class="row" data-status="1">A</div>
<div class="row" data-status="0">B</div>
<div class="row" data-status="1">C</div>
<div class="row" data-status="0">D</div>

我想對DOM中的div元素重新排序，並將data-status="1"元素推到頂部，如下所示：

<div class="row" data-status="1">A</div>
<div class="row" data-status="1">C</div>
<div class="row" data-status="0">B</div>
<div class="row" data-status="0">D</div>

謝謝 ：）

Answer 1

假設他們有父母，您可以使用prepend（）追加（重新）追加

 $('.parent').prepend($('[data-status="1"]')); 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> <div class="parent"> <div class="row" data-status="1">A</div> <div class="row" data-status="0">B</div> <div class="row" data-status="1">C</div> <div class="row" data-status="0">D</div> </div> 

注意，這不會添加新元素。 相反，由於將所選元素附加到相同的div（但在第一個位置），因此隱式地使用它們

Answer 2

如果要通過javascript方法（而不是CSS選擇器）處理它，則可以執行以下操作：

$('.parent > div').sort(function (a, b) {

    var contentA = parseInt($(a).attr('data-status'), 10);
    var contentB = parseInt($(b).attr('data-status'), 10);
    return (contentA < contentB) ? 1 : (contentA > contentB) ? -1 : 0;
}).appendTo('.parent');

 $('.parent div').sort(function (a, b) { var contentA = parseInt($(a).attr('data-status'), 10); var contentB = parseInt($(b).attr('data-status'), 10); return (contentA < contentB) ? 1 : (contentA > contentB) ? -1 : 0; }).appendTo('.parent'); 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> <div class="parent"> <div class="row" data-status="1">A</div> <div class="row" data-status="0">B</div> <div class="row" data-status="1">C</div> <div class="row" data-status="0">D</div> </div> 

Answer 3

您可以使用detach()並將其與prependTo放回去，以使其堆疊在其他頂部

$("div[data-status=1]").detach().prependTo(".container");

小提琴修改過的html