包含ol或ul的li的排序失敗，並且HierarchyRequestError失敗：節點無法插入層次結構中的指定點

Question

我使用CKEditor創建富文本並將結果html嵌入到無序列表（ul）中的li中包含的div中， 。我使用jQuery和各種比較對li進行排序。當富文本本身含有UL的或醇的，這CKEditor的允許，那種失敗，並在FF螢火蟲消息：

「HierarchyRequestError：節點不能在上線層次指定點插入」

並引用了jQuery中的代碼：

append: function() { 
    return this.domManip(arguments, true, function(elem) { 
     if (this.nodeType === 1 || this.nodeType === 11) { 
      this.appendChild(elem); 
     } 
    }); 
}, 

當html不包含任何ul或ol的時候，排序工作正常。

下面是HTML背景：

無序列表，其中每個李被歸類「RetailerSearchSectionLine」或含有含豐富的文本作爲HTML div的。

下面是其失敗的jQuery的排序功能之一：

var TransferArray = $(".RetailerSearchSectionLine").toArray().sort(function(a, b) 
{ 
    var distance1 = $(a).data("DistanceFromReferenceLocation"); 
    var distance2 = $(b).data("DistanceFromReferenceLocation"); 
    return (distance1 - distance2); 
}); 
$("#RetailerSearchSectionBody ul").append(TransferArray); 

有什麼建議？我正在考慮將鍵排序到數組，然後根據排序結果重新排列ul。但是如果有一些基本問題，我沒有看到列表中的列表，這實際上可能不起作用。

Answer 1

線

$("#RetailerSearchSectionBody ul").append(TransferArray); 

看起來不正確的，因爲$("#RetailerSearchSectionBody ul")可以選擇集合（包括兒童ULS），而不是一個獨特的元素。

下應該放心地選擇一個獨特的元素：

$("#RetailerSearchSectionBody").children("ul").eq(0).append(TransferArray); 

如果不行的話，就可以說是比較正常的執行對原有的jQuery包裹元素的排序，而不是爆發成爲一個真正的陣列，如下所示：

Array.prototype.sort.call($(".RetailerSearchSectionLine"), function(a, b) { 
    var distance1 = $(a).data("DistanceFromReferenceLocation"); 
    var distance2 = $(b).data("DistanceFromReferenceLocation"); 
    return (distance1 - distance2); 
}).each(function(i, item) { 
    $("#RetailerSearchSectionBody").children("ul").eq(0).append(item); 
}); 

這可能是學術性的你採用哪種方法，因爲排序本身似乎不是問題。無論如何，這是你可以嘗試的其他東西。