jquery中的置顶，置底，向上，向下的排序功能

css

.selectedLi{background: #f0ad4e;color:#fff;}

html部分

<ul class="seetSelect2" id='sysAllSet'>
　　<li value="1" index='1'>集团考核保障</li>
　　<li value="2" index='2'>业务全景监控视图</li>
　　<li value="3" index='3'>专家辅助分析</li>
　　<li value="4" index='4'>动态基线</li>
　　<li value="5" index='5'>综合报表</li>
　　<li value="6" index='6'>告警监控综合管理</li>
　　<li value="7" inddex='7'>告警分析系统</li>
</ul>

<button type="button" class="btn btn-default" id='setTop'>置顶</button>
<button type="button" class="btn btn-default" id='toTop'>向上</button>
<button type="button" class="btn btn-default" id='toBottom'>向下</button>
<button type="button" class="btn btn-default" id='setBottom'>置底</button>

js部分

//事件初始化：点击li时候，为当前点击的li添加样式，方便后续操作 判断 是否选中当前点击的元素（用的是ul li,不是select option）;
$("#sysAllSet li").click(function(){
         $(".seetSelect2 li").removeClass('selectedLi');
         $(this).addClass('selectedLi');
     });
     $("#sysAllSet li").dblclick(function(){//双击元素 去除样式类名 取消当前选中
　　　　$(this).removeClass('selectedLi');
});

 

//置顶
$("#setTop").click(function(){
    if($("#sysAllSet>li").hasClass("selectedLi")){
        var selLi = $("#sysAllSet>li.selectedLi");
            if (selLi.index() != 0) {
                selLi.fadeOut(10).fadeIn(100);
                $("#sysAllSet").prepend(selLi);
            }else{
                alert("已经置顶啦~");
                return;
            }
    }else{
        return false;
    }
});

//置底
$("#setBottom").click(function(){

　　if($("#sysAllSet>li").hasClass("selectedLi")){
　　　　var selLi = $("#sysAllSet>li.selectedLi");
　　　　var length = $("#sysAllSet>li").length;
　　　　if (selLi.index() != length-1) {
　　　　　　selLi.fadeOut(10).fadeIn(100);
　　　　　　$("#sysAllSet").append(selLi);
　　　　}else{
　　　　　　alert("已经置底啦~");
　　　　　　return;
　　　　};
　　}else{
　　　　return false;
　　}
});

//向上
$("#toTop").click(function(){

　　if($("#sysAllSet>li").hasClass("selectedLi")){
　　　　var selLi = $("#sysAllSet>li.selectedLi");
　　　　if (selLi.index() != 0) {
　　　　　　selLi.fadeOut(10).fadeIn(100);
　　　　　　selLi.prev().before(selLi);
　　　　}else{
　　　　　　alert("已经置顶啦~");
　　　　　　return;
　　　　}
　　}else{
　　　　return false;
　　}
});

//向下
$("#toBottom").click(function(){　

　　if($("#sysAllSet>li").hasClass("selectedLi")){
　　　　var selLi = $("#sysAllSet>li.selectedLi");
　　　　var length = $("#sysAllSet>li").length;
　　　　if (selLi.index() != length-1) {
　　　　　　selLi.fadeOut(10).fadeIn(100);
　　　　　　selLi.next().after(selLi);
　　　　}else{
　　　　　　alert("已经置底啦~");
　　　　　　return;
　　　　}
　　}else{
　　　　return false;
　　}

});