发新贴  快速回复

为什么第一个元素上移可以自动移到最后,而下移不行?

匿名用户
2017-12-23 12:22

请老师帮我看看,在不做判断的前提下,为什么上移可以实现第一个移动到最后一个,而下移不行?

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        ul,li {
            margin: 0;
            padding: 0;
        }
        li {
            text-indent: 30px;
            width: 200px;
            height: 40px;
            line-height: 40px;
            list-style: none;
            border: 1px #999999 solid;
            margin-bottom: 5px;
            background-color: #f8f8f8;
        }
        input {
            margin-left: 10px;
        }
        ul {

        }
    </style>
</head>
<body>
<ul>
    <li>第一项<input type="button" value="上移"><input type="button" value="下移"></li>
    <li>第二项<input type="button" value="上移"><input type="button" value="下移"></li>
    <li>第三项<input type="button" value="上移"><input type="button" value="下移"></li>
    <li>第四项<input type="button" value="上移"><input type="button" value="下移"></li>
    <li>第五项<input type="button" value="上移"><input type="button" value="下移"></li>
</ul>


<script>
    var oUl = document.getElementsByTagName('ul')[0];
    var aLi = oUl.children;
    for (var i=0;i<aLi.length;i++){
        //上移
        aLi[i].children[0].err= = function () {

            var temp = this.parentNode.previousElementSibling;
            oUl.insertBefore(this.parentNode,temp)

        }
        //下移
        aLi[i].children[1].onclick = function () {

            var temp = this.parentNode.nextElementSibling;
            oUl.insertBefore(temp,this.parentNode)

        }
    }

</script>
</body>
</html>

 

本帖内容针对以下视频发布:

14-练习需求
 
2017年2月8日
将你的js代码换成我下面这个就可以了。解释下,this.parentNode.nextElementSibling这个获取的是下一个兄弟节点,但是最后一个li是没有下一个兄弟节点的,就会返回null。既然是空,还去执行这句话oUl.insertBefore(temp,this.parentNode)就会报错。所以加个判断条件就好了。
var oUl = document.getElementsByTagName('ul')[0];
var aLi = oUl.children;
for (var i=0;i<aLi.length;i++){
//上移
aLi[i].children[0].err= = function () {
var temp = this.parentNode.previousElementSibling;
oUl.insertBefore(this.parentNode,temp)

}
//下移
aLi[i].children[1].err= = function () {
var temp = this.parentNode.nextElementSibling;
if(!temp){
oUl.insertBefore(this.parentNode,aLi[0])
}else{
oUl.insertBefore(temp,this.parentNode)
}

}
}

 

2017-12-23 14:14  回复本帖
匿名用户

2017年2月8日 2017-12-23 14:14发表的内容:

将你的js代码换成我下面这个就可以了。解释下,this.parentNode.nextElementSibling这个获取的是下一个兄弟节点,但是最后一个li是没有下一个兄弟节点的,就会返回null。既然是空,还去执行这句话oUl.insertBefore(temp,this.parentNode)就会报错。所以加个判断条件就好了。
var oUl = document.getElementsByTagName('ul')[0];
var aLi = oUl.children;
for (var i=0;i<aLi.length;i++){
//上移
aLi[i].children[0].err= = function () {
var temp = this.parentNode.previousElementSibling;
oUl.insertBefore(this.parentNode,temp)

}
//下移
aLi[i].children[1].err= = function () {
var temp = this.parentNode.nextElementSibling;
if(!temp){
oUl.insertBefore(this.parentNode,aLi[0])
}else{
oUl.insertBefore(temp,this.parentNode)
}

}
}

 

感谢!再问一下,那为什么第一个元素 上移 不用加if判断就能移动到最后一个?
2017-12-23 17:24  回复本帖
 
2017年2月8日

匿名用户 2017-12-23 17:24发表的内容:

感谢!再问一下,那为什么第一个元素 上移 不用加if判断就能移动到最后一个?
首先要明白这个insertBefore()的用法,这个接受两个参数,第一个参数是你要操作的那个节点,可以是现有的节点,也可以是js创建出来的节点。第二个参数是表示第一个参数的节点要放在哪个的前面,如:insertBefore(aLi[1],aLi[3])。这句话的意思就是,第二个li要放在第四个li的前面。注意,insertBefore这些操作是剪切操作,不是复制的。第二个参数也可以是null 、undefined,但是在ie低版本写null undefined 会报错,为null,undefined时会默认把第一个参数的节点放到最后,就跟appendChild()功能一样了。
所以你上面 var temp = this.parentNode.previousElementSibling;在获取第一个li的上一个兄弟节点就会获取不到,会返回null。于是oUl.insertBefore(this.parentNode,temp)中第二个参数是null。那就会把第一个参数的节点放到最后。我记得在ie低版本第二个参数是null undefined 会报错。
2017-12-23 20:32  回复本帖
匿名用户

2017年2月8日 2017-12-23 20:32发表的内容:

首先要明白这个insertBefore()的用法,这个接受两个参数,第一个参数是你要操作的那个节点,可以是现有的节点,也可以是js创建出来的节点。第二个参数是表示第一个参数的节点要放在哪个的前面,如:insertBefore(aLi[1],aLi[3])。这句话的意思就是,第二个li要放在第四个li的前面。注意,insertBefore这些操作是剪切操作,不是复制的。第二个参数也可以是null 、undefined,但是在ie低版本写null undefined 会报错,为null,undefined时会默认把第一个参数的节点放到最后,就跟appendChild()功能一样了。
所以你上面 var temp = this.parentNode.previousElementSibling;在获取第一个li的上一个兄弟节点就会获取不到,会返回null。于是oUl.insertBefore(this.parentNode,temp)中第二个参数是null。那就会把第一个参数的节点放到最后。我记得在ie低版本第二个参数是null undefined 会报错。
我明白了!谢谢谢谢!
2017-12-24 11:51  回复本帖
登录 后才可以发表回复