jQuery ReplaceWith() 文档

发布于 2024-12-05 07:47:42 字数 1631 浏览 2 评论 0原文

我正在研究 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>

原文

I am working through the jQuery documentation and found a piece of a replaceWith() example (the last example from http://api.jquery.com/replaceWith/) that I don't fully understand. I will post a link to this post as a comment on the jQuery documentation replaceWith() page to aid others new to jQuery and DOM manipulation.

Specifically, I do not fully understand the behavior of "$container" in:

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

I was expecting the above code to append the word "inner" to the "p" contents because the "replaceWith()" method was called when the variable was created:

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

However, "$("p").append( $container.attr("class") );" actually appends the word "container", not the word "inner".

It seems that the variable "$container" actually references the div that was replaced, "$("div.container")", not the replacing content, "$(this).contents();".

Two questions:

What is "replaceWith()" doing in this context?
Is there something special going on with the order of operations or the "attr()" method that I am not seeing?

Here is the full code:

<!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>

分享到QQ

分享到微博