Question

replaceWith()对我不起作用。例如，给定此HTML：

<div id="tree1">
    <div>
        <h3>Item 1</h3>
        <h3>Item 2</h3>
        <h3>Item 3</h3>
    </div>
</div>

此代码不会将<h3>节点替换为<li> s：

var items_Bad   = $("#tree1 div h3").clone ();

$("#tree1 div").remove ();
$("#tree1").append ('<ul id="Items1"></ul>');

//--- This does not replace anything!
items_Bad.replaceWith (function () {
    return ('<li>' + $(this).text () + '</li>');
} );

$("#Items1").append (items_Bad);

但是这段代码呢！：

var items_Good  = $("#tree1 div h3").clone ();

$("#tree1 div").remove ();
$("#tree1").append ('<ul id="Items1"></ul>');

$("#Items1").append (items_Good);

//--- But, this works!
$("#Items1 h3"). replaceWith (function () {
    return ('<li>' + $(this).text () + '</li>');
} );

See the jsFiddle.

此处，replaceWith()仅在节点（重新）附加到DOM时有效，但the documentation表示：

从jQuery 1.4开始，.replaceWith（）也可以在断开连接的DOM上工作节点

我错过了什么？

（请注意，我不控制原始页面的来源。而且，我还有很多操作要做，所以不希望过早地重新连接节点来操纵它们。）

Answer 1

以下代码是replaceWith()处理替换分离节点的部分（直接取自jQuery 1.7.1 source，模数较小的格式差异）：

replaceWith: function(value) {
    if (this[0] && this[0].parentNode) {
        // This deals with attached nodes...
    } else {
        return this.length
            ? this.pushStack(jQuery(jQuery.isFunction(value) ? value() : value),
                "replaceWith", value)
            : this;
    }
}

如您所见，有两个限制阻止此代码满足您的要求：

提供的函数仅在集合中每个元素调用一次而不是一次，
在全局上下文中调用提供的函数（即，通过this关键字无法使用要替换的元素。）

所以，我担心更换分离的节点仍然是一项正在进行的工作，你必须回到第二个解决方案，直到上述限制得到解决。

replaceWith（）无法处理克隆的分离节点

1 个答案: