課程
/前端開發
/jQuery
/jQuery基礎(二)—DOM篇
為什么第一次remove了p元素,第二次remove的時候還要將前面的p算上,:contains('3')而不是:contains('1'),這樣說,內部是不是依然沒有刪除的,只是不顯示
2016-09-25
源自:jQuery基礎(二)—DOM篇 4-2
正在回答
首先,你對contains篩選的理解可能不太對,contains('3')的意思不是篩選出索引的第三個元素,而是篩選出文本內容包含'3'的元素。所以,執行了remove方法之后是刪除了test1中的p元素的。
首先你要明白:contains()選擇器的用法
也就是說
$("p").remove(":contains('3')")
這一句代碼的含義不是指刪除第三個p元素,而是指刪除text中含有3的p元素。因此當你刪除p元素3后,再次點擊自然不會繼續remove p元素。
為了加深你的理解:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title></title>
<link rel="stylesheet" href="">
<style>
.btn
{
cursor:pointer;
}
</style>
</head>
<body>
<div class="test1">
? ? ? ? <p>p元素1</p>
? ? ? ? <p>p元素2</p>
? ? </div>
? ? <div class="test2">
? ? ? ? <p>p元素3</p>
? ? ? ? <p>p元素4</p>
<div id="btn_remove" class="btn">刪除第二個p元素</div>
<script type="text/javascript" src="js/jquery-1.11.3.min.js">
</script>
<script type="text/javascript">
$("#btn_remove").on("click",function()
var length = $("p").length;
index = 0;
$("p").each(function()
if(index == 1)
$(this).remove();
index++;
})
</body>
</html>
當你點擊刪除第二個p元素后,
p元素2會被刪除
當你點擊刪除第二個p元素后
p元素3會被刪除(因為此刻p元素3位于p元素集合中第二個位置)
不知道這樣講,你明白了嗎?還有問題可以聯系我。
舉報
jQuery第二階段開啟DOM修煉,了解創建、插入、刪除與替換
2 回答jQuery基礎(二)——DOM 4-4 detach()
2 回答jQuery基礎(二) 6-2 find() 任務中的問題
3 回答jQuery基礎DOM篇-保留數據的刪除操作detach(),先點擊bt2出現4個,6個,8個p的問題
2 回答DOM篇的例子 運行不了
1 回答remove的問題
Copyright ? 2025 imooc.com All Rights Reserved | 京ICP備12003892號-11 京公網安備11010802030151號
購課補貼聯系客服咨詢優惠詳情
慕課網APP您的移動學習伙伴
掃描二維碼關注慕課網微信公眾號
2016-12-07
首先,你對contains篩選的理解可能不太對,contains('3')的意思不是篩選出索引的第三個元素,而是篩選出文本內容包含'3'的元素。所以,執行了remove方法之后是刪除了test1中的p元素的。
2016-09-25
首先你要明白:contains()選擇器的用法
也就是說
$("p").remove(":contains('3')")
這一句代碼的含義不是指刪除第三個p元素,而是指刪除text中含有3的p元素。因此當你刪除p元素3后,再次點擊自然不會繼續remove p元素。
為了加深你的理解:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title></title>
<link rel="stylesheet" href="">
<style>
.btn
{
cursor:pointer;
}
</style>
</head>
<body>
<div class="test1">
? ? ? ? <p>p元素1</p>
? ? ? ? <p>p元素2</p>
? ? </div>
? ? <div class="test2">
? ? ? ? <p>p元素3</p>
? ? ? ? <p>p元素4</p>
? ? </div>
<div id="btn_remove" class="btn">刪除第二個p元素</div>
<script type="text/javascript" src="js/jquery-1.11.3.min.js">
</script>
<script type="text/javascript">
$("#btn_remove").on("click",function()
{
var length = $("p").length;
index = 0;
$("p").each(function()
{
if(index == 1)
{
$(this).remove();
}
index++;
})
})
</script>
</body>
</html>
當你點擊刪除第二個p元素后,
p元素2會被刪除
當你點擊刪除第二個p元素后
p元素3會被刪除(因為此刻p元素3位于p元素集合中第二個位置)
不知道這樣講,你明白了嗎?還有問題可以聯系我。