Javascript 在对html元素排序时使用jQuery appendTo（）_Javascript_Jquery_Html_Sorting

Javascript 在对html元素排序时使用jQuery appendTo（）

javascript jquery html sorting

Javascript 在对html元素排序时使用jQuery appendTo（）,javascript,jquery,html,sorting,Javascript,Jquery,Html,Sorting,我需要在一些容器中对html节点进行有效排序。以下是我所做工作的简化版本： <html> <ul class="navigation"> <li class="first">Main</li> <li class="second">HTML и CSS tricks</li> <li class="third">Study</li> <li class="four

我需要在一些容器中对html节点进行有效排序。以下是我所做工作的简化版本：

<html>
<ul class="navigation">
    <li class="first">Main</li>
    <li class="second">HTML и CSS tricks</li>
    <li class="third">Study</li>
    <li class="fourth">HTML reference</li>
</ul>
<script src="http://code.jquery.com/jquery-1.10.1.min.js"></script>
<script src="http://code.jquery.com/jquery-migrate-1.2.1.min.js"></script>
<script>
var rows = $( ".navigation" ).children();

function sortAlpha(a,b){  
    return a.innerHTML.toLowerCase() > b.innerHTML.toLowerCase() ? 1 : -1;  
};  

rows.sort(sortAlpha).appendTo('.navigation'); 
</script>
</html>

他们问这样使用appendTo可以吗？使用这种方法可能有（或者将来会有）一些缺点，为什么使用appendTo会替换父容器的内容，为什么它不只是将已排序的内容添加到父容器中？如果这是jQuery的一个临时特性，将来不会这样工作，那该怎么办

我需要说的是，实际情况更为复杂，例如，我们使用的库允许我们在前端进行面向对象编程，而且每个需要排序的元素都是表中的一行，其中包含一些具有事件绑定的控件

其想法是用排序元素替换dom节点的内容，这样库就不会注意到这一点。我在实际代码中使用了上面描述的方法，至少目前是没有错误的，但问题仍然是：1）这种方法的缺点是什么，2）什么是更好的选择

appendTo应该是appendTo…我很惊讶它的行为竟然像.html（）。为了让他们高兴，为什么不直接执行

$（'.navigation'）.empty（）.append（rows.sort（sortAlpha））
这在for.appendTo（）
中介绍：
我们还可以在页面上选择一个元素并将其插入另一个元素：
如果以这种方式选择的元素被插入到DOM中其他位置的单个位置，它将被移动到目标中（而不是克隆）
因此，由于您正在选择页面上已经存在的元素，并使用仅匹配单个元素的选择器调用.appendTo（）
，因此这些选定元素将按照它们在匹配元素集中的顺序移动到新的目标元素中。你把它们放回同一个元素是不相关的
缺点是什么
没有我能想到的。您正在使用函数功能的一个文档化方面。.appendTo（）
的工作方式不太可能改变。
基本上，appendTo（）将在指定元素的末尾插入html节点，如下：.navigation
假设您使用的是jQuery Sort plugin（），如果需要对导航菜单重新排序，只需执行以下操作：
$('.navigation li').sort(function(a, b){
  return $(a).text() > $(b).text() ? 1 : -1;
});

顺便说一下，如果要替换一个元素的全部内容，请考虑<代码> HTML*（）/代码>方法，该方法清空节点并插入内容。
 尝试此，
$(function() {
$.fn.sortList = function() {
var mylist = $(this);
var listitems = $('li', mylist).get();
listitems.sort(function(a, b) {
    var compA = $(a).text().toUpperCase();
    var compB = $(b).text().toUpperCase();
    return (compA < compB) ? -1 : 1;
});
$.each(listitems, function(i, itm) {
    mylist.append(itm);
});
 }

$("ul.navigation").sortList();

});

$（函数（）{
$.fn.sortList=函数（）{
var mylist=$（此值）；
var listitems=$（'li'，mylist）.get（）；
排序（函数（a，b）{
var compA=$（a.text（）.toUpperCase（）；
var compB=$（b.text（）.toUpperCase（）；
回报率（公司<公司）？-1:1；
});
$.each（列表项、函数（i、itm）{
mylist.append（itm）；
});
}
$（“ul.navigation”）.sortList（）；
});

对不起，我的意思是.empty（）
OP和他的同事误解了.appendTo（）
的行为。它的功能与.html（）
方法不同。如果不考虑JQuery的实际工作原理，很容易就会认为appendTo会附加一个克隆，而不是简单地刷新已有的内容。实际上，它并没有克隆元素，只是将它们移动到目标元素。sort（）指的是什么？
$('.navigation li').sort(function(a, b){
  return $(a).text() > $(b).text() ? 1 : -1;
});

$(function() {
$.fn.sortList = function() {
var mylist = $(this);
var listitems = $('li', mylist).get();
listitems.sort(function(a, b) {
    var compA = $(a).text().toUpperCase();
    var compB = $(b).text().toUpperCase();
    return (compA < compB) ? -1 : 1;
});
$.each(listitems, function(i, itm) {
    mylist.append(itm);
});
 }

$("ul.navigation").sortList();

});