javascript - JQuery，如何按字母顺序重新排列 dom 元素？

Question

我在模式中显示复选框列表。模态内容类似于:

<div class="container>
  <label>
    <input type="checkbox" name="A name" value="A Value">
    &nbsp;A Value
  </label>
  <br>
  <label>
    <input type="checkbox" name="B name" value="B Value">
    &nbsp;B Value
  </label>
  ....
<div>

复选框可以重新排序。但是每次显示模态时，我都想保留复选框的顺序，以便它们按字母顺序显示。使用以下代码对它们进行排序非常简单，但是关于如何操作容器以使复选框按正确顺序排列有什么建议吗？

var sorted = modal.find(':checkbox').sort(function(a, b) {

        var aText = a.value;
        aText = aText.trim().toLowerCase();

        var bText = b.value;
        bText = bText.trim().toLowerCase();


        if (aText < bText) {
          return -1;
        } else if (aText > bText) {
          return 1;
        } else {
          return 0;
        }
      });

Answer 1

试试这个:使用下面的代码重新排列您的复选框。 (假设你的排序功能是正确的)

var sorted = modal.find(':checkbox').sort(function(a, b) {

        var aText = a.value;
        aText = aText.trim().toLowerCase();

        var bText = b.value;
        bText = bText.trim().toLowerCase();


        if (aText < bText) {
          return -1;
        } else if (aText > bText) {
          return 1;
        } else {
          return 0;
        }
      }).each(function (_, checkbox) {
              $(checkbox).closest('.container').append($(checkbox).closest('label'));
        });

JSFiddle Demo

注意 - 请移动您的 <br>里面<label>标签