JQuery操作html实现<li>标签上移和下移效果

1.为了方便操作元素,先定义一个css样式如:

.optli{color:green;}

2.将ul绑定(注册)点击事件

$('#ulName').on('click','li',nodeContent);                  //li点击事件

var nodeContent=function(){
    $(this).addClass('optli').siblings().removeClass('optli'
);//将选中的颜色设置为.optli,其余为原来
};

3.绑定上移事件:
   var moveUp=function(){
    var index = $('#ulName').find('.optli');              //找到选中的li
    if(index.index() != 0){                            //只要【下标值】不是0,都可以上移
      index.prev().before(index);
    }
   }

4.绑定下移事件:
   var moveDown=function(){
    var index = $('#ulName').find('.optli');
     if(index.index() != length-1){                    //只要【下标值】不是最后一个都可以下移
      index.next().after(index);
    }
  }


阅读更多
版权声明:本文为博主原创文章,未经博主允许不得转载。 https://blog.csdn.net/jinziweiwang/article/details/62887849
想对作者说点什么? 我来说一句

没有更多推荐了,返回首页

关闭
关闭
关闭