倒序排序子元素
<body style="text-align:center">
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
</ul>
<br />
<input type="button" value="倒序排子元素" onclick="de()" />
</body>
<script type="text/javascript">
function de(){
var ul=document.getElementsByTagName("Ul")[0];
if(ul.hasChildNodes())
{
var len=ul.childNodes.length;
var arr=[];
for(var i=0;i<len;i++)
{
arr[i]=ul.childNodes[0];
ul.removeChild(ul.childNodes[0]);
}
for(var i=len-1;i>=0;i--)
{
ui.appendChild(arr[i]);
}
}
}
</script>
谁能帮我解释一下，看不懂了
qq_小盛开_0浏览 1488回答 2
2回答
-
BCS
<body style="text-align:center"> <ul> <li>1</li> <li>2</li> <li>3</li> <li>4</li> </ul> <br /> <input type="button" value="倒序排子元素" onclick="de()" /> </body> <script type="text/javascript"> function de(){ var ul=document.getElementsByTagName("Ul")[0]; if(ul.hasChildNodes()) //检测元素是否有子节点 { var len=ul.childNodes.length; //获得子节点数量 var arr=[]; //声明数组 for(var i=0;i<len;i++) //循环 { arr[i]=ul.childNodes[0]; //将子节点依次添加到数组中 ul.removeChild(ul.childNodes[0]); //将子节点依次删除 } for(var i=len-1;i>=0;i--) //倒叙的关键 { ul.appendChild(arr[i]); //添加 // 楼主应该自己分析，不懂的"方法"去看，学 } } } </script> </body> -
千秋此意
script标签放到</body>上面去，不要放它在下面ui.appendChild(arr[i]); l写错成了i， 改成 ul.appendChild(arr[i]);再说下这段代码在button行内添加事件 调用下面封装的de函数函数里先获取了 ul 元素，然后判断 如果 ul 有子元素， 执行排序的代码声明 len = ul子元素的个数，循环用。声明 arr = []; 用来缓存ul的子元素根据len执行for循环遍历ul所有的子元素， 每次循环 把当前的子元素节点缓存到数组arr中，然后从ul中移除当前的子元素节点第一次循环完毕后 ul 的子元素全部被移除，arr中为原ul中的子元素的集合再开始第二个循环，for （var i = len-1; i >= 0; i--) { ul.appendChild(arr[i]) };这表示从数组arr最后一个元素开始遍历该数组，即第一次append到ul中的元素是arr中最后一个，也就是原来的ul中的最后一个元素，循环完也就实现了倒序。。。
随时随地看视频慕课网APP
Html/CSS
JavaScript