0

我正在使用 CKEditor 创建富文本并将生成的 html 嵌入到无序列表 (ul) 中的 li 中包含的 div 中。我使用 jQuery 和各种比较对 li 进行排序。当富文本本身包含 ul 或 ol 时，CKEditor 将允许，排序失败并在 FF Firebug 中显示消息：

“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 上下文：

一个无序列表，其中每个 li 都被归类为“RetailerSearchSectionLine”，并且包含 div，其中包含作为 html 的富文本。

这是失败的 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 。但是，如果列表中的列表存在一些我没有看到的基本问题，那么这实际上可能不起作用。

4

1 回答 1

1

线

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

看起来不正确，因为$("#RetailerSearchSectionBody ul")可能会选择一个集合（包括子 UL）而不是唯一元素。

以下应该安全地选择一个独特的元素：

$("#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);
});

您采用哪种方法可能是学术问题，因为排序本身似乎不是问题。无论如何，这是您可以尝试的其他方法。

于 2012-11-28T22:55:34.183 回答