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

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);
    }
  }



你可能感兴趣的:(JQuery操作html实现标签上移和下移效果)