jQuery DOM 操作 replaceWith() および replaceAll()
以前にノードの內(nèi)部挿入、外部挿入、および削除メソッドを?qū)W習しました。このセクションでは、置換メソッド replaceWith
.replaceWith( newContent ) を?qū)W習します: セット內(nèi)のすべての一致する要素を提供されたコンテンツで置き換え、セットを返します。簡単に言うと、$() を使用してノード A を選択し、replaceWith メソッドを呼び出し、新しいコンテンツ B (HTML 文字列、DOM 要素、または jQuery オブジェクト) を渡して、選択したノード A を置き換えます
簡単な例を見てみましょう: HTML コードの一部
<div>
<p>最初の段落</p> <p>二番目の段落</p>
<p>三番目の段落</p>
< ;/div>
2番目の段落のノードとコンテンツを置き換えます
$("p:eq(1)").replaceWith('<a style="color:red">コンテンツを置き換えます2 番目の段落の </a>')
jQuery で 2 番目の p 要素をフィルターし、 replaceWith を呼び出して置き換えます。結(jié)果は次のようになります
<div>
<p>最初の段落</p> ; <a style="color:red">2 番目の段落の內(nèi)容を置き換えます</a>'
<p>3 番目の段落</p>
</div>
。 replaceAll( target ) : 各ターゲット要素をセットの一致する要素に置き換えます
.replaceAll() と .replaceWith() は同様の機能を持ちますが、ターゲットとソースが逆になります。 上記の HTML 構(gòu)造を使用して、 replaceAll を使用して処理します。
$('<a style ="color:red">2 番目の段落の內(nèi)容を置換</a>').replaceAll('p:eq(1)')
概要:
replaceAll () と .replaceWith() は、主にターゲットとソースの場所の違いにより同様の機能を持ちます
replaceWith() メソッドと .replaceAll() メソッドは、ノードに関連付けられたすべてのデータとイベント ハンドラーを削除します
replaceWith() メソッドは、他のほとんどの jQuery メソッドと同様に jQuery オブジェクトを返すため、他のメソッドとリンクできます
replaceWith() メソッドによって返される jQuery オブジェクトは、replaceWith による置換後のノードではなく、置換前のノードを參照します/replaceAll メソッド
以下の例を參照してください:
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-type" content="text/html; charset=utf-8" />
<title></title>
<script src="http://libs.baidu.com/jquery/1.9.1/jquery.js"></script>
<style>
.right div {
background: yellow;
}
</style>
</head>
<body>
<h2>replaceWith()和replaceAll()</h2>
<div class="left">
<button class="bt1">點擊,通過replaceWith替換內(nèi)容</button>
<button class="bt2">點擊,通過rreplaceAll替換內(nèi)容</button>
</div>
<div class="right">
<div>
<p>第一段</p>
<p>第二段</p>
<p>第三段</p>
</div>
<div>
<p>第四段</p>
<p>第五段</p>
<p>第六段</p>
</div>
</div>
<script type="text/javascript">
//只克隆節(jié)點
//不克隆事件
$(".bt1").click(function(){
//找到內(nèi)容為第二段的p元素
//通過replaceWith刪除并替換這個節(jié)點
$(".right > div:first p:eq(1)").replaceWith('<a style="color:red">replaceWith替換第二段的內(nèi)容</a>')
})
</script>
<script type="text/javascript">
//找到內(nèi)容為第六段的p元素
//通過replaceAll刪除并替換這個節(jié)點
$(".bt2").click(function() {
$('<a style="color:red">replaceAll替換第六段的內(nèi)容</a>').replaceAll('.right > div:last p:last');
})
</script>
</body>
</html>
