Question

我正在处理jQuery文档，并找到了一个我不完全理解的replaceWith（）示例（来自http://api.jquery.com/replaceWith/的最后一个示例）。我将发布一篇关于这篇文章的链接，作为对jQuery文档replaceWith（）页面的评论，以帮助其他人了解jQuery和DOM操作。

具体来说，我并不完全理解“$ container”的行为：

"$("p").append( $container.attr("class") );"

我希望上面的代码将“inner”这个词附加到“p”内容，因为在创建变量时调用了“replaceWith（）”方法：

var $container = $("div.container").replaceWith(function() {
    return $(this).contents();
});

但是，“$（”p“）。append（$ container.attr（”class“））;”实际上附加了“容器”这个词，而不是“内在”这个词。

似乎变量“$ container”实际上引用了被替换的div，“$（”div.container“）”，而不是替换内容，“$（this）.contents（）;”。

两个问题：

在此上下文中“replaceWith（）”做什么？
操作顺序或我看不到的“attr（）”方法是否存在特殊情况？

以下是完整代码：

<!DOCTYPE html>
<html>
<head>
    <style> 
    .container { background-color: #991; }
    .inner { color: #911; }
    </style>
    <script src="http://code.jquery.com/jquery-latest.js"></script>
</head>
<body>

<p>
    <button>Replace!</button>
</p>
<div class="container">
    <div class="inner">Scooby</div>
    <div class="inner">Dooby</div>
    <div class="inner">Doo</div>
</div>

<script>
$('button').bind("click", function() {
    **var $container = $("div.container").replaceWith(function() {
        return $(this).contents();
    });**

    **$("p").append( $container.attr("class") );**
});
</script>

</body>
</html>

Answer 1

From the .replaceWith() documentation：

与大多数jQuery方法一样，.replaceWith()方法返回jQuery对象，以便可以将其他方法链接到它上面。 但是，必须注意返回原始jQuery对象。此对象引用已从DOM中删除的元素，而不是已替换它的新元素。

...所以你所看到的是预期的行为，$container应该并且确实引用被替换的内容，而不是替换。

jQuery replaceWith（）文档

1 个答案: