jquery 替换元素后出错，是咋回事-JavaSript-爱易网页

jquery 替换元素后出错，是咋回事

日期：2014-05-16　浏览次数：20398 次

jquery 替换元素后出错，是怎么回事
<ul id = 'list'>
<li>花田喜事<a href="#" class="up"> ↑</a><a href="#" class="down"> ↓</a></li>
<li>天涯情歌<a href="#" class="up"> ↑</a><a href="#" class="down"> ↓</a></li>
<li>游山玩水<a href="#" class="up"> ↑</a><a href="#" class="down"> ↓</a></li>
<li>人像摄影<a href="#" class="up"> ↑</a><a href="#" class="down"> ↓</a></li>
</ul>
<input type="button" id="btn" name="btn" value="按钮" />

$('#btn').live('click',function(){
var val = '';
$("li").each(function () {
val += $(this).text();
});
$.ajax({
url:'a.php',
type:'POST',
data:'value='+val,
dataType:'json',
timeout:1000,
success:function(e){
var x = document.getElementById("list");
var s = x.childNodes.length;
for(var j=0;j<s;j++){
x.removeChild(x.childNodes[0]);
}
var strs = new Array();
strs = e.split(" ");
alert(strs);
for(var i=0;i<strs.length;i++){
document.getElementById("list").innerHTML += "<li>"+strs[i]+"<a href='#' class='up'>"+strs[i+1]+" </a><a href='#' class='down'>"+strs[i+2]+" </a></li>";
i = i+2;
if(i+2 >= strs.length) break;
}
}
});
});

第一次点击按钮的时候，没有问题，但是第二次点击之后就出错了，显示成

花田喜事↑ ↓ 天涯情歌↑ ↓ 游山玩水↑ ↓ 人像摄影↑ ↓ undefined undefined

要怎么解决？

------解决方案--------------------
x.removeChild(x.childNodes[0]);

这样只删除了一个

这样试试
x.removeChild(x.childNodes[j]);

------解决方案--------------------
感觉strs多个回车或者空格 trim下
function trim(str){ //删除左右两端的空格
return str.replace(/(^\s*)|(\s*$)/g, "");
}
strs=trim(strs);
------解决方案--------------------
是e多
------解决方案--------------------
刚楼主说只能删除一半，确实有这个问题，做了个测试
j递减没问题，即 3 2 1 0（索引）去删除li
j递增的话，问题就来， firebug报的错
0
2.html (第 29 行)
1
2.html (第 29 行)
2
2.html (第 29 行)
Component returned failure code: 0x80004003 (NS_ERROR_INVALID_POINTER) [nsIDOMHTMLUListElement.removeChild]
[在此错误处中断]
obj.removeChild(s[j])

html的dom结构是这样的，
天涯情歌 ↑ ↓
人像摄影 ↑ ↓
完全不符合
花田喜事 ↑ ↓
天涯情歌 ↑ ↓
游山玩水 ↑ ↓
人像摄影 ↑ ↓
删除 0 1 的格式，如果删除 0 1的话，剩下的应该是
游山玩水 ↑ ↓
人像摄影 ↑ ↓
，分析了下，删除0时没问题，把花田喜事删除了，
1时，看似索引是天涯情歌，但是现在却是游山玩水了，说明此时索引改变了，0为天涯情歌，这就说明这样删除花田喜事之后，索引“位移”了，自动向前跑了一位。
2时，只剩下
天涯情歌
人像摄影
此时的2是指向人像摄影之后的索引值，但是这个索引没有了，所以就报错了。

HTML code


<!DOCTYPE HTML>
<html>
    <head>
        <meta charset="gb2312" />
        <title></title>
        <style>
        </style>
    </head>
    <body>
        <ul id = 'list'>
            <li>花田喜事<a href="#" class="up"> ↑</a><a href="#" class="down"> ↓</a></li>
            <li>天涯情歌<a href="#" class="up"> ↑</a><a href="#" class="down"> ↓</a></li>
            <li>游山玩水<a href="#" class="up"

免责声明： 本文仅代表作者个人观点，与爱易网无关。其原创性以及文中陈述文字和内容未经本站证实，对本文以及其中全部或者部分内容、文字的真实性、完整性、及时性本站不作任何保证或承诺，请读者仅作参考，并请自行核实相关内容。

jquery 替换元素后出错，是咋回事

相关资料更多>

推荐阅读更多>