87,845
社区成员
发帖
与我相关
我的任务
分享js问题求解
批量删除留言的代码，为什么两种for循环的结果却是不一样的。（var i=0;i<aI.length;i++）这种为什么会间隔着删除呢？？？
var oP = document.createElement('p');
document.body.appendChild(oP);
var oIn = document.createElement('input');
oIn.type = 'button';
oIn.value = '批量删除';
oP.appendChild(oIn);
oIn.onclick = function(){
var aI = oUl.getElementsByTagName('input');
for(var i=aI.length-1;i>=0;i--){
if(aI[i].checked){
oUl.removeChild(aI[i].parentNode);
}
}
/*for(var i=0;i<aI.length;i++){
if(aI[i].checked){
oUl.removeChild(aI[i].parentNode);
}
}*/
}
var oP = document.createElement('p');
document.body.appendChild(oP);
var oIn = document.createElement('input');
oIn.type = 'button';
oIn.value = '批量删除';
oP.appendChild(oIn);
oIn.onclick = function(){
var aI = oUl.getElementsByTagName('input');
for(var i=aI.length-1;i>=0;i--){
if(aI[i].checked){
oUl.removeChild(aI[i].parentNode);
}
}
/*for(var i=0;i<aI.length;i++){
if(aI[i].checked){
oUl.removeChild(aI[i].parentNode);
}
}*/
}
...全文
请发表友善的回复…
发表回复
hch126163 2015-07-02
- 打赏
- 举报
for(var i=0;i<aI.length;i++){
if(aI[i].checked){
oUl.removeChild(aI[i].parentNode);
}
}
删除第一个index=0后 ,
index =1 的也是变成了 index=0
index =2的也是变成了 index=1
i++ => aI[i] = aI[1] 此时删除的是 原来的第3个元素 index=2
forwardNow 2015-07-02
- 打赏
- 举报
“ var aI = oUl.getElementsByTagName('input'); ”
al是一个动态的 NodeList，它不是真正的数组，而是类数组，但你可以把它当数组来对待；
比如 al = [ node0, node1, node2 ], 你要删除所有节点
for ( var i = 0; i < al.length; i++ ) {
al[i].parentNode.removeChild( al[i] );
}
当i = 0时，你把node0删掉了，此时 al = [ node1, node2 ]，al.length = 2;
当i = 1时，你把node2删掉了，此时 al = [ node1 ]，al.length = 1;
当i = 2时，i > al.length，循环结束。
当然，逆序循环，你把循环的过程分析一遍，就理解了，这里就不重复了；
还有一种方式，就是创建动态NodeList的快照
var snapshot = Array.prototype.slice.call(al, 0);
然后，在 snapshot上不管是逆序for循环删还是正序for循环删都没问题的。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
</ul>
<input type="button" onclick="deleteAllItems()" value="删除">
<script type="text/javascript">
function deleteAllItems () {
var items = document.getElementsByTagName( "li" );
var snapshot = Array.prototype.slice.call( items, 0 );
for ( var i = 0; i < snapshot.length; i++ ) {
var node = snapshot[ i ];
node.parentNode.removeChild( node );
}
}
</script>
</body>
</html>
xuzuning 2015-07-02
- 打赏
- 举报
数组在删除一个元素后，其 length 将减少一
因此按序号递增删除时，就出现间隔删除的现象
而按序号递减删除时，总是删除在尾部的元素
所以如果用按序号递增删除时，只能在不符合删除条件的元素位置递增序号
for(var i=0;i<aI.length;i++){
if(aI[i].checked){
oUl.removeChild(aI[i].parentNode);
i--; //不让序号增加
}
}
