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，但在第一个位置，它隐式地对它们进行排序