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元素推到顶部，如下所示：

<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()

（重新）追加他们

＆＃13;

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

＆＃13;

<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>

＆＃13;

注意，这不会添加新元素。相反，由于将所选元素附加到同一个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');

＆＃13;

$('.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');

＆＃13;

<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>

＆＃13;

Answer 3

您可以使用detach()并将其与prependTo一起放回去使其叠加在其他人的顶部

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

fiddle略微修改了html

Javascript / jQuery - 重新排序div

3 个答案: