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