追加和排序div

问题描述

| 让我向我们展示我的情况和问题。 这是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

现在，当我尝试追加一个元素然后对这些元素进行排序时，出现了一个麻烦：实际上，最后插入的元素没有排序，但是只是追加到列表的末尾：

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

为什么这种行为？我该如何解决？     

解决方法

        不知道这是否是最好的解决方法，但是您可以将文本“ 4”字：http：//jsfiddle.net/WEtML/4/

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

    ,        您有空格问题。插入后检查标记。第一项以空格开头，而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>