【www.bbyears.com--jquery】
昨天在写 jQuery 的时候碰到个小问题纠结了我蛮久,后来在 foxling 的指点下才知道是那么一回事。
问题是这样滴,有一个 UL 列表,在某个事件响应之后要把 UL 列表里面的 LI 内容给逐行移除掉,于是有了下面的 HTML 代码:
代码如下
再看执行js后效果:
对比一下就知道啦.li的id为fileid18的被删除了.
代码如下
主要代码如下:$("li").remove("#fileid"+fid);
代码如下
例2
<script src="js/jquery.js" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function(){
var spotMax = 3;
if($("div.spot").size() >= spotMax) {$(obj).hide();}
$("input#add").click(function(){ addSpot(this, spotMax);
});
});function addSpot(obj, sm) {
$("div#spots").append(
"" +
" " +
" " +
" " +
"")
.find("input.remove").click(function(){
$(this).parent().remove();
$("input#add").show();
});if($("div.spot").size() >= sm) {$(obj).hide();}
};
</script>
<script>
$("#send").click(function(){
alert("Demonstration Only: submit disabled");
});
</script>
1
2
3
4
5
删除
以及下面的 JavaScript 代码:
代码如下 $("#del").click(function(){var list = $("#test");
var len = list.find("li").length;
for(var i = 0; i < len; i++){
list.find("li:eq("+ i +")").remove();
}
});
我刚写完的时候觉得逻辑很合理,应该没什么问题,先计算出 UL 标签里面有多少个 LI ,然后利用 For 循环逐个把里面每个 LI 的内容移除掉,但是代码一执行的时候,问题就出来了,它并没有把里面的内容全部移除掉,而是还有一些 LI 遗留在页面上。
代码如下
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<script>
$(function(){
$("#del").click(function(){
var list = $("#test");
var len = list.find("li").length;
for(var i = 0; i < len; i++){
list.find("li:eq("+ i +")").remove();
}
});
});
</script>
1
2
3
4
5
6
7
8
9
10
删除
。
后来在 foxling 的指点下,才得知这其中的原因,就是当 i 等于 0 的时候,这时是正确的删除了第一个 LI 标签(其索引为 0);当 i 等于 1 的时候,原来列表中的第 2 个 LI 标签的索引由于前一个 LI 标签被删除的原因从 1 变成了 0,所以该 LI 标签并没有被移除,而此时被移除的是原来列表中的第 3 个 LI 标签,此时它的索引已变为 1 了,如此循环……这就是为什么执行完该 for 循环之后还有一些内容没有被移除的原因了。
上面的 JavaScript 只要修改一点点的地方就 OK 了:
代码如下$("#del").click(function(){
var list = $("#test");
var len = list.find("li").length;
for(var i = 0; i < len; i++){
list.find("li:eq(0)").remove();//因为每次循环删除一个 LI 标签后,跟在其后的 LI 标签的索引都变为了 0
}
});
例