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

时间:2022-05-07 19:43:07

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

});