jQuery replaceWithで置換した要素の参照

jQueryのreplaceWithは要素を置換することが出来ます。

これはとても便利で私はtrの差し替えなどによく使います。

・・・がしかし、

jQueryのreplaceWith で要素を置換すると、返り値にメソッドチェーンが返ってきますが

置換したHTMLに対して操作をしたい時この返り値に対してfind等をしても参照することが出来ません。

こういった場合は、再度セレクタを用いて再取得しないといけないようです。

var tr = $('table').find('tr:first');
tr.replaceWith('<tr><th>置換後！</th></tr>');
console.log(tr.find('th').text());  //置換前！

tr = $('table').find('tr:first');
console.log(tr.find('th').text());  //置換後！

var tr = $('table').find('tr:first');

tr.replaceWith('<tr><th>置換後！</th></tr>');

console.log(tr.find('th').text()); //置換前！

tr = $('table').find('tr:first');

console.log(tr.find('th').text()); //置換後！