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>标记内的^(?=.*?a)(?=.*?b)(?=.*?c)[abc]{3}$

Answer 2

首先对标签进行排序：

var $sorted = modal.find('label:has(:checkbox)').sort(function(a, b) {
    var valA = $(a).find(':checkbox').val().trim().toLowerCase();
    var valB = $(b).find(':checkbox').val().trim().toLowerCase();
    return valA.localeCompare(valB);
});

然后再将它们添加到父级：

$container.empty().append($sorted.after('<br />'));

Answer 3

.container>label { display:block; }

几乎是这样......但那些讨厌的＆lt; BR＆gt;破坏交易

添加

@FieldBridge(impl=IntegerNumericFieldBridge.class) 
@Field(index=Index.YES, analyze=Analyze.NO, store=Store.NO) @NumericField
private Integer integerValue;

到您的CSS，并删除＆lt; BR＆gt;

编辑：我不小心意外没有jQuery

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

3 个答案: