div jquyer 上下切换位置

css 样式

 .template-data{
        background-color: #4CAF50; color: black;
        padding: 15px 32px;
        text-align: center;
        text-decoration: none;
        display: inline-block;
        font-size: 16px;
    }
    .layui-sort {
        background-color: #e7e7e7; color: black;
        border: none;
        padding: 15px 32px;
        text-align: center;
        text-decoration: none;
        display: inline-block;
        font-size: 16px;
        cursor: pointer;
    }

html

<div class="body-template">
    <div class="template-sort">
        <div>
            <div class="template-data">1</div>
            <div class="layui-icon-up layui-sort">上</div>
            <div class="layui-icon-down layui-sort">下</div>
        </div>
        <hr>
    </div>
    <div class="template-sort">
        <div>
            <div class="template-data">2</div>
            <div class="layui-icon-up layui-sort">上</div>
            <div class="layui-icon-down layui-sort">下</div>
        </div>
        <hr>
    </div>
    <div class="template-sort">
        <div>
            <div class="template-data">3</div>
            <div class="layui-icon-up layui-sort">上</div>
            <div class="layui-icon-down layui-sort">下</div>
        </div>
        <hr>
    </div>
</div>

jquery

// 上下切换位置
  $(".layui-sort").click(function () {
       //layui-icon-down(下) layui-icon-up(上)
       var body_template = $(this).parents('.template-sort')
       var template_prev = body_template.prev();
       var template_next = body_template.next();
       var template_prev_strlen = template_prev.length;
       var template_next_strlen = template_next.length;

       var this_class = $(this).attr('class').trim().split(/\s+/)[0]

       if (this_class == "layui-icon-down") { // (下)
           if (template_next_strlen == 0) {
               alert('亲，现在已是最下的哦，不能再下移了...');
               return
           }
           template_next.after(body_template);

       } else if (this_class == "layui-icon-up") { //(上)
           if (template_prev_strlen == 0) {
               alert('亲，现在已是最上的哦，不能再上移了...');
               return
           }
           template_prev.before(body_template);
       }
   })