Dom替換replaceWith()和replaceAll()中，兩次點擊后，<p>第二段</p>和<p>第三段</p>都被替換掉，這不是bug嗎？怎么改成只能替換掉<p>第二段</p>？
<!DOCTYPE html>
<html>
<head>
??? <meta http-equiv="Content-type" content="text/html; charset=utf-8" />
??? <title></title>
??? <script src="http://idcbgp.cn/static/lib/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").on('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").on('click', function() {
??????? $('<a style="color:red">replaceAll替換第六段的內(nèi)容</a>').replaceAll('.right > div:last p:last');
??? })
??? </script>
</body>
</html>
2018-03-16
<!DOCTYPE html>
<html>
<head>
? ?<meta http-equiv="Content-type" content="text/html; charset=utf-8" />
? ?<title></title>
? ?<script src="http://idcbgp.cn/static/lib/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>
</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").on('click', function() {
? ? ? ?//找到內(nèi)容為第二段的p元素
? ? ? ?//通過replaceWith刪除并替換這個節(jié)點
? ? ? ?$(".right div:first p:eq(1)").replaceWith('<p ?style="color:red">replaceWith替換第二段的內(nèi)容</p>')
? ?})
</script>
</body>
</html>
同學(xué)，?$(".right > div:first p:eq(1)").replaceWith('<a style="color:red">replaceWith替換第二段的內(nèi)容</a>')
你把p元素替換成啦a元素，那么第一個div里面只有2個p元素啦，之前第3個p元素那就變成第二p元素，所以當(dāng)你連續(xù)點擊2次時，<p>第二段</p>和<p>第三段</p>都被替換掉。
<div>
? ? ? <p>第一段</p>
? ? ? ?<a>第二段</a>
? ? ? ?<p>第三段</p>
? ?</div>