练习
除了列出的3种语言外,请再添加Pascal、Lua和Ruby,然后按字母顺序排序节点:
<!-- HTML结构 -->
<div id="test-div">
<ul>
<li><span>JavaScript</span></li>
<li><span>Python</span></li>
<li><span>Swift</span></li>
</ul>
</div>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8">
<title></title>
<script type="text/javascript" src="jquery.min.js">
</script>
<script type="text/javascript">
window.onload = function(){
var ul = $('#test-div>ul');
var arr = ['Pascal','Lua','Ruby'];
ul.find('span').map(function(item){
arr.push($(this).text());
});
arr.sort();
ul.find('li').remove();//一开始写成ul.remove(),结果无法append,没有任何显示,因为remove把<ul>也删了导致添加了<li>无法显示
arr.map(function(e){
ul.append('<li><span>' + e + '</li></span>');
});
}
</script>
</head>
<body>
<div id="test-div">
<ul>
<li><span>JavaScript</span></li>
<li><span>Python</span></li>
<li><span>Swift</span></li>
</ul>
</div>
</body>
</html>