Javascript 追加和排序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

---

为什么会有这种行为？我该如何修复它？

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

安迪
欧内斯特
做记号
伙计

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

安迪
欧内斯特
做记号
伙计

不确定这是否是最佳解决方案，但您可以选择以下文本：

---

不确定这是否是最佳解决方案，但您可以选择以下文本：

---

每次追加时只需对项目重新排序。我就是这么做的，但它不起作用：检查小提琴示例请显示您的排序调用。这可能是时间问题吗？插入前排序？添加了排序功能。您可以从Fiddle链接显示整个代码。每次追加时只需重新排序项目。这就是我所做的，但它不起作用：检查Fiddle示例请显示您的排序调用。这可能是时间问题吗？插入前排序？添加了排序功能。您可以从Fiddle链接中显示整个代码。@markzzz您能用空格修复更新您的第二个示例吗？是的，这太棒了。但它并没有解决我的“真正问题”，因为我附加的字符串来自一个JSON对象，它与元素相同……thirtydot发布了修复。只需在排序时（甚至在插入之前）使用trim删除尾随空格，它就会起作用。@markzzz您能用空格修复程序更新您的第二个示例吗？是的，这太棒了。但它并没有解决我的“真正问题”，因为我附加的字符串来自一个JSON对象，它与元素相同……thirtydot发布了修复。只要在排序时（甚至在插入之前）使用trim删除尾随空格，它就应该可以工作。正如marsbear在下面所说的，正是我要说的，你有一个空格问题。正如marsbear在下面所说的，正是我要说的，你有一个空格问题。

<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>

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