Question

我希望能够通过点击按钮对我的页面上的一堆div元素进行排序。

所有这些内容都有简单的文字内容，例如：

<div class='sortme'>
    CCC
</div>
<div class='sortme'>
    AAA
</div>
<div class='sortme'>
    BBB
</div>
<div class='sortme'>
    DDD
</div>

当用户点击按钮时，应按字母顺序重新排列。显然有很多方法可以做到这一点，最明显的是我们可以将所有内容都放到一个数组中，对数组进行排序并根据它重新创建HTML。

这是这种解决方案的一个例子：

http://jsfiddle.net/hibbard_eu/C2heg/

然而，这对于已经使用的很多代码都不会很好，而且我希望能够简单地移动div而不做任何破坏性的事情。这可能吗？

Answer 1

使用sort()
使用appendTo()

＆＃13;

$('.sortme').sort(function(a, b) {
  if (a.textContent < b.textContent) {
    return -1;
  } else {
    return 1;
  }
}).appendTo('body');

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<div class='sortme'>
  CCC
</div>
<div class='sortme'>
  AAA
</div>
<div class='sortme'>
  BBB
</div>
<div class='sortme'>
  DDD
</div>

＆＃13;

Answer 2

即使没有jQuery也可以非常简单地完成

function sortThem(s) {
    Array.prototype.slice.call(document.body.querySelectorAll(s)).sort(function sort (ea, eb) {
        var a = ea.textContent.trim();
        var b = eb.textContent.trim();
        if (a.textContent < b.textContent) return -1;
        if (a.textContent > b.textContent) return 1;
        return 0;
    }).forEach(function(div) {
        div.parentElement.appendChild(div);
    });
}
// call it like this
sortThem('div.sortme');

元素 .appendChild（x）将x添加为元素的最后一个子元素，如果DOM存在于DOM中，则将其从其当前位置移开所以，不需要任何体操将其移到一个地方并将其添加到其他地方

Answer 3

使用追加。

var $divs = $("div.box");

$("div.box").on("click", function (e) {
    alert("I'm an original");
});

$('#alphBnt').on('click', function () {
    var alphabeticallyOrderedDivs = $divs.sort(function (a, b) {
        return $(a).find("h1").text() > $(b).find("h1").text();
    });

    alphabeticallyOrderedDivs.each(function (i, item) {
        $("#container").append(item);
    });
});

$('#numBnt').on('click', function () {
    var numericallyOrderedDivs = $divs.sort(function (a, b) {
        return $(a).find("h2").text() > $(b).find("h2").text();
    });

    numericallyOrderedDivs.each(function (i, item) {
        $("#container").append(item);
    });
});

Fiddle

按字母顺序排序DIV而不破坏和重新创建它们？

3 个答案: