Jquery 实现页面中的上移、下移、置顶、置底

jsp

        

            
class="item" style="border: 1px solid red;">
                

                    
class="sort-down">下移
                    
class="sort-asc">上移
                
                

                    内容11111
                
            
            
class="item" style="border: 1px solid blue; text-align: center">
                

                    
class="sort-down">下移
                    
class="sort-asc">上移
                
                

                    内容22222
                
            
            
class="item" style="border: 1px solid yellow; text-align: right;">
                

                    
class="sort-down">下移
                    
class="sort-asc">上移
                
                

                    内容33333
                
            
        





class="demo">
    
001 class="up">上移<a
        href="javascript:void(0)" class="down">下移<a
        href="javascript:void(0)" class="top">置顶<a
        href="javascript:void(0)" class="bottom">置底
    
002 class="up">上移<a
        href="javascript:void(0)" class="down">下移<a
        href="javascript:void(0)" class="top">置顶<a
        href="javascript:void(0)" class="bottom">置底
    
003 class="up">上移<a
        href="javascript:void(0)" class="down">下移<a
        href="javascript:void(0)" class="top">置顶<a
        href="javascript:void(0)" class="bottom">置底
    
004 class="up">上移<a
        href="javascript:void(0)" class="down">下移<a
        href="javascript:void(0)" class="top">置顶<a
        href="javascript:void(0)" class="bottom">置底

js

/**
 * 
 */
$(document).on(
        'click',
        '.sort-down',
        function() {
            //判断是否有下一个节点
            if ($(this).parents('.item').nextAll().length > 0) {
                $(this).parents('.item').next().after(
                        $(this).parents('.item').prop('outerHTML'));
                $(this).parents('.item').remove();
            }
        }).on(
        'click',
        '.sort-asc',
        function() {
            //判断是否有上一个节点
            if ($(this).parents('.item').prevAll().length > 0) {
                $(this).parents('.item').prev().before(
                        $(this).parents('.item').prop('outerHTML'));
                $(this).parents('.item').remove();
            }
        })

$(".demo").on(
        'click',
        'a',
        function(event) {
            event.preventDefault;
            var parent = $(this).parent();
            var parents = $(this).parents(".demo");
            var len = parents.children().length;

            if (($(this).is(".up") || $(this).is(".top"))
                    && parent.index() == 0) {
                alert("已经位于最顶端！");
                return false;
            } else if (($(this).is(".down") || $(this).is(".bottom"))
                    && parent.index() == len - 1) {
                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);
                break;
            case $(this).is(".bottom"):
                parents.append(parent);
                break;
            }
        });

 

转载于:https://www.cnblogs.com/livon/p/9843356.html