0

私はjQueryのドキュメントに取り組んでおり、完全に理解していないreplaceWith()の例( http://api.jquery.com/replaceWith/の最後の例)の一部を見つけました。この投稿へのリンクを jQuery ドキュメントの replaceWith() ページのコメントとして投稿し、jQuery および DOM 操作の初心者を支援します。

具体的には、次の「$container」の動作を完全には理解していません。

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

変数が作成されたときに「replaceWith()」メソッドが呼び出されたため、上記のコードが「p」の内容に「inner」という単語を追加することを期待していました。

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

ただし、「$("p").append( $container.attr("class") );」実際には、「内部」という単語ではなく、「コンテナ」という単語を追加します。

変数「$container」は実際には、置き換えられたコンテンツ「$(this).contents();」ではなく、置き換えられた div「$("div.container")」を参照しているようです。

2 つの質問:

  1. このコンテキストで「replaceWith()」は何をしていますか?
  2. 操作の順序または「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>
4

1 に答える 1

1

.replaceWith()ドキュメントから：

この.replaceWith()メソッドは、ほとんどの jQuery メソッドと同様に、jQuery オブジェクトを返すため、他のメソッドをそれに連鎖させることができます。ただし、元の jQuery オブジェクトが返されることに注意する必要があります。このオブジェクトは、それを置き換えた新しい要素ではなく、DOM から削除された要素を参照します。

...したがって、あなたが見ているのは予想される動作です。交換ではなく、交換されたものを$container参照する必要があります。

于 2011-09-18T12:32:04.950 に答える