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

假设他们有 parent，您可以使用 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");

fiddle 稍作修改 html

Javascript / jQuery - 重新排序 div

Javascript / jQuery - Reorder divs

javascript

sorting

jquery

dataset