jQuery 在使用 append() 而不是最后时首先插入子项

Question

我在使用 jQuery 向 HTML 中的列表插入子元素时遇到问题。对于任何 JavaScript 相关的事情，我都是初学者，所以我的代码可能非常笨拙且未优化。即使您不能帮助我解决最初的问题，我也总是会提供改进我的代码和学习的建议。

我有一个每秒运行一次的函数（它是从我的 CefSharp 应用程序调用的，不确定它是否相关）。这是我的功能：

function updateOrderQueue(index, reference, pickedup, deliveredto, robotId, statuscode, statustext) {
    var list = $('#orderQueueList');
    var count = $("#orderQueueList li").length;

    if (!document.getElementById('order' + reference) && statuscode < 4 && count < 10) {
        var data = $(`<li class="list-group-item d-flex justify-content-between align-items-center border border-dark" id="order` + reference + `">
                        <h3 class="mt-1" id="text`+ reference + `">
                            [`+index+`] `+ pickedup + ` ➔ ` + deliveredto + ` (` + statustext +  `)
                        </h3>
                        <small class="badge badge-dark rounded" style="font-size:24px;" id="robotQueue`+ reference + `">` + robotId + `</small>
                    </li>`);
        list.append(data).hide().fadeIn(500);
    } else {
        var locations = jQuery("#text" + jq(reference));
        var assignedrobot = jQuery("#robotQueue" + jq(reference));

        locations.text('['+index+'] '+ pickedup + ' ➔ ' + deliveredto + ' (' + statustext + ')');
        assignedrobot.text(robotId);
    }

    var elems = $('#orderQueueList li').detach().sort(function (a, b) {
        if (isNaN($(a).text()) || isNaN($(b).text())) {
            return $(a).text() > $(b).text() ? 1 : -1;
        }
        return $(a).text() - $(b).text();
    });
    list.append(elems);
}

这是 HMTL 代码

<div id="orderQueue" class="">
   <ul class="list-group" id="orderQueueList">
   </ul>
</div>

我将尝试快速解释我打算用它做什么以及它实际上做了什么。

所以基本上，这段代码应该添加、排序和添加相关的类 到列表中的项目。要添加，该项目需要通过一组要求（尚未添加，状态码低于 4 且项目总数不超过 10 个）。然后我将该项目附加到列表中，我假设它会把它放在列表的末尾（与前置相比，它应该做相反的事情）。

问题是，无论何时添加新项目，它都会被添加到列表的顶部。我的猜测是，这与我将其附加到 ul 这一事实有关。我尝试做类似 $('#orderQueueList li:last') 的操作，但我没有让它工作。我也尝试在添加之前执行 $('#orderQueueList).children() 和 $('#orderQueueList).last()没有成功。

我错过了什么？我是否完全误解了 append 的作用？我是不是代码写错了？

多多指教，

提前致谢。

Answer 1

这里的问题不是.append()，而是后面的.sort()。

文本排序受空格影响，所以解决方案是.trim()进行文本比较时的文本：

$("ul").append("<li>new</li>").hide().fadeIn(500);
var elems = $('ul li').detach().sort(function(a, b) {
  if (isNaN($(a).text()) || isNaN($(b).text())) {
    return $(a).text().trim() > $(b).text().trim() ? 1 : -1;
  }
  return $(a).text() - $(b).text();
});
$("ul").append(elems);

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<ul>
  <li>   2</li>
  <li>1555</li>
  <li>xyz</li>
  <li>3</li>
  <li>
  abc
  </li>
</ul>

jQuery 在使用 append() 而不是最后时首先插入子项

jQuery inserting children first when using append() instead of last

javascript

html

jquery

append