Kami telah mempelajari kaedah sisipan dalam, sisipan luar dan pemadaman nod sebelum ini Dalam bahagian ini kami akan mempelajari kaedah penggantian replaceWith
.replaceWith( newContent ): gantikan semua elemen padanan dalam koleksi dengan kandungan yang disediakan dan kembalikan Padam koleksi elemen
Secara ringkasnya: gunakan $() untuk memilih nod A, panggil kaedah replaceWith dan masukkan kandungan baharu B (rentetan HTML, elemen DOM atau objek jQuery) untuk menggantikan Nod A yang dipilih
Lihat contoh mudah: sekeping kod HTML
<div>
<p>Perenggan pertama</p>
<p>No. Perenggan kedua</p>
<p>Perenggan ketiga</p>
</div>
Ganti nod dan kandungan daripada perenggan kedua
$("p:eq(1)").replaceWith('<a style="color:red">Ganti kandungan perenggan kedua</a>')
Tapis elemen p kedua melalui jQuery dan panggil replaceWith untuk menggantikannya Hasilnya adalah seperti berikut
<div>
<p>Perenggan pertama</. p>
<a style="color:red">Gantikan kandungan perenggan kedua</a>'
<p>Perenggan ketiga</p>
</div> ;
.replaceAll( target ): Gantikan setiap elemen sasaran dengan elemen padanan koleksi
.replaceAll() dan .replaceWith() mempunyai persamaan fungsi, tetapi sasaran dan sumber adalah bertentangan, gunakan Untuk struktur HTML di atas, kami menggunakan replaceAll untuk memproses
$('<a style="color:red">menggantikan kandungan perenggan kedua< ;/a>').replaceAll('p:eq (1)')
Ringkasan:
replaceAll() dan .replaceWith() mempunyai fungsi yang sama, perbezaan utama ialah lokasi sasaran dan sumber
replaceWith() Kaedah .replaceAll() akan memadamkan semua data dan pengendali peristiwa yang dikaitkan dengan nod
Kaedah replaceWith(), seperti kebanyakan jQuery lain kaedah, mengembalikan objek jQuery, jadi ia boleh dirantai dengan kaedah lain
Objek jQuery yang dikembalikan oleh kaedah replaceWith() merujuk kepada nod sebelum penggantian, bukan nod selepas penggantian melalui kaedah replaceWith/replaceAll.
Lihat contoh berikut:
<!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替换内容</button>
<button class="bt2">点击,通过rreplaceAll替换内容</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">
//只克隆节点
//不克隆事件
$(".bt1").click(function(){
//找到内容为第二段的p元素
//通过replaceWith删除并替换这个节点
$(".right > div:first p:eq(1)").replaceWith('<a style="color:red">replaceWith替换第二段的内容</a>')
})
</script>
<script type="text/javascript">
//找到内容为第六段的p元素
//通过replaceAll删除并替换这个节点
$(".bt2").click(function() {
$('<a style="color:red">replaceAll替换第六段的内容</a>').replaceAll('.right > div:last p:last');
})
</script>
</body>
</html>
bahagian seterusnya