追加和排序div

Question

让我向我们展示我的场景和我的问题。

This是DIV的名单是由的categories1按字母顺序jQuery的内容时，页面加载命令：

<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

不知道这是否是最好的修复，但你可以$.trim文本：http://jsfiddle.net/WEtML/4/

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

Answer 2

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