jQuery实现上移、下移、置底、置顶、新增删除按钮的显示隐藏

话不多说上代码！

HTML代码

<div class="demo">
     <div class="item">
            001
            <button>＋</button>
            <button>－</button>
            <button class="up">↑</button>
            <button class="down">↓</button>
            <button class="top">置顶</button>
            <button class="bottom">置底</button>
     </div>
     <div class="item">
            002
            <button>＋</button>
            <button>－</button>
            <button class="up">↑</button>
            <button class="down">↓</button>
            <button class="top">置顶</button>
            <button class="bottom">置底</button>
     </div>
     <div class="item">
            003
            <button>＋</button>
            <button>－</button>
            <button class="up">↑</button>
            <button class="down">↓</button>
            <button class="top">置顶</button>
            <button class="bottom">置底</button>
     </div>
     <div class="item">
            004
            <button>＋</button>
            <button>－</button>
            <button class="up">↑</button>
            <button class="down">↓</button>
            <button class="top">置顶</button>
            <button class="bottom">置底</button>
     </div>
</div>

js代码

 $(document).ready(function(){
    // 用于控制+-，第一行永远显示+   其他行显示-
    function sort() {
        $(".item").each(function(index, e) { // 循环item
            if(index==0){ // 下标为0时
                $('.item').eq(index).find('button').eq(0).show(); // +显示
                $('.item').eq(index).find('button').eq(1).hide(); // -隐藏
            }else{ // 其他情况
                $('.item').eq(index).find('button').eq(0).hide(); // +隐藏
                $('.item').eq(index).find('button').eq(1).show(); // -显示
            }
        });
    }
    sort()
    $(document).on('click', 'button',function(event) { // 给button加点击事件
        event.preventDefault; // 该方法将通知 Web 浏览器不要执行与事件关联的默认动作，阻止表单提交
        var parent = $(this).parent(); // 拿到父级
        var parents = $(this).parents(".demo"); // 拿到祖先叫demo的元素
        var length = parents.children().length; // 拿到demo子级的长度
        if (($(this).is(".up") || $(this).is(".top")) && parent.index() == 0) { // 点击上移或者置顶，并且父级下标为0时，说明已位于最顶端
            alert("已位于最顶端！");
            return false;
        } else if (($(this).is(".down") || $(this).is(".bottom")) && parent.index() == length - 1) { // 点击下移或者置底，并且父级下标等于demo的长度-1时（-1是因为下标从0开始），说明已位于最底端
            alert("已位于最底端！");
            return false;
        }
        switch (true) {
            case $(this).is(".up"): // 点击上移
                var prev = parent.prev(); // 获取同胞元素的上一个元素
                parent.insertBefore(prev); // 将它插入到当前元素之后，实现当前元素上移
                break;
            case $(this).is(".down"): // 点击下移
                var next = parent.next(); // 获取同胞元素的下一个元素
                parent.insertAfter(next); // 将它插入到当前元素之前，实现当前元素下移
                break;
            case $(this).is(".top"): // 点击置顶
                parents.prepend(parent); // 在parents元素（子级）的开头插入parent
                break;
            case $(this).is(".bottom"): // 点击置底
                parents.append(parent); // 在parents元素（子级）的结尾插入parent
                break;
        }
        sort() // 重新排序
    })
});