Question

让我告诉我们我的情景和我的问题。

This是一个div列表，在加载页面时由jQuery按字母顺序排列categories1的内容：

<div id="container">
    <div class="categories">
        <div class="categories1">
            Ernest
        </div>
    </div>

    <div class="categories">
        <div class="categories1">
            Andy
        </div>
    </div>

    <div class="categories">
        <div class="categories1">
            Mark
        </div>
    </div>
</div>

// result
Andy
Ernest
Mark

Now，当我尝试追加一个元素然后对元素进行排序时，有一个问题：实际上插入的最后一个元素没有排序，但它只是附加在列表的末尾：

<div class="categories">
    <div class="categories1">
        Buddy
    </div>
</div>

// result
Andy
Ernest
Mark
Buddy

这是排序功能：

$(function() {
    var items = $('.categories1').get();

    items.sort(function(x,y) {
      return $(x).text() > $(y).text();
    });

    $('#container').empty();

    $(items).each(function() {
        $('#container').append($(this).parent());
    });
});

为什么会这样？我该如何解决？

Answer 1

你有一个空白问题。插入后检查您的标记。第一项以空格开头，而Buddy则没有。

<div id="container">
  <div class="categories">
    <div class="categories1"> Andy </div>
  </div>
  <div class="categories">
    <div class="categories1"> Ernest </div>
  </div>
  <div class="categories">
    <div class="categories1"> Mark </div>
  </div>
  <div class="categories">
    <div class="categories1">Buddy</div>
  </div>
</div>

Answer 2

不确定这是否是最佳解决方案，但您可以$.trim文字：http://jsfiddle.net/WEtML/4/

items.sort(function(x,y) {
    return $.trim($(x).text()) > $.trim($(y).text());
});

追加和排序div

2 个答案: