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

2012-07-24

jquery 替换元素后出错，是怎么回事ul id listli花田喜事a href# classup ↑/aa href#

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"> ↑</a><a href="#" class="down"> ↓</a></li>            <li>人像摄影<a href="#" class="up"> ↑</a><a href="#" class="down"> ↓</a></li>        </ul>        <script>            function $(el){                return typeof el == 'string' ? document.getElementById(el) : el;            }            var obj = $('list');            var s = obj.getElementsByTagName('li');            /*            for(var len = s.length - 1, j = len; j > -1; j--){                console.log( j )                obj.removeChild(s[j])            }            */            for(var len = s.length, j = 0; j < len; j++){                console.log( j )                obj.removeChild(s[j])            }                    </script>    </body></html> 
 
[解决办法]
既然用了 dataType: 'json'

到底返回的 e 是什么格式

为什么还要 strs = e.split(" ");
[解决办法]
那dataType: 'json'这样设置做什么？

热点排行

JavaScript

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