jQeuryメソッドチェーンが効くときと効かないときはどう区別するのか？

Question

jqueryでメソッドチェーンが効いたり効かなかったりする区別はどうすればできますか？

以下はcssが効かないのですが、なぜなのでしょうか？

<p>私は置換されてしまいます…</p>

$('p').replaceWith('<p>置換されました</p>').css('display','none');

↓こうしないと効かない

$('p').replaceWith( '<p>置換されました</p>' );
$('p').css('display','none');

Answer 1

マニュアルをよく読むしかないのですが, 出来れば公式な英語版のマニュアルを読んで欲しいところです.

例えば今回の replaceWith(newContent) であれば, 公式には:

• DOM から内容を削除し, 新たな内容を挿入する
• 削除された要素のセットを返す

ことが書かれており, また, わざわざ:

• 戻り値の jQuery オブジェクトに対してチェーンできる
• 但し元の jQuery オブジェクトが返されていることに注意. これは DOM から削除された要素を参照しており, 置換された新たな要素を参照しているわけではない

ということも断り書きされています.
jQuery の日本語版マニュアルのサイトは多数ありますが, 情報が古かったり細かい仕様が省略されていたりするので, 英語であっても公式なマニュアルが良いです.

なお, 英語マニュアルと言ってもすべて訳す必要はありません.
Google 翻訳などの機械翻訳で「この辺に欲しい情報が書かれているな」とアタリを付けてから, 必要な部分だけ原文をしっかり読みましょう.

Comments

[tarakorakko]

ありがとうございます。勉強になりました。マニュアル読む癖がないとダメですね。

Answer 2

下記のようにするといいでしょう。

$('<p>置換されました</p>').replaceAll("p").css('display','none');

replaceAll と replaceWith の違いは、下記のコードで確認できると思います。

var e = $('p').replaceWith('<p>置換されました</p>');
console.log(e.text()); //私は置換されてしまいます…
e.css('display','none');

var e = $('<p>置換されました</p>').replaceAll("p");
console.log(e.text()); //置換されました
e.css('display','none');

Comments

[tarakorakko]

eに置換後の要素が入っていないから効かなかったんですね。ありがとうございます。