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

jsp

<!-- 开发时，请从此处开始复制代码 start -->
<br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/>
        <div>
            <div class="item" style="border: 1px solid red;">
                <div style="display: flex;">
                    <div class="sort-down">下移</div>
                    <div class="sort-asc">上移</div>
                </div>
                <div>
                    内容11111
                </div>
            </div>
            <div class="item" style="border: 1px solid blue; text-align: center">
                <div style="display: flex;">
                    <div class="sort-down">下移</div>
                    <div class="sort-asc">上移</div>
                </div>
                <div>
                    内容22222
                </div>
            </div>
            <div class="item" style="border: 1px solid yellow; text-align: right;">
                <div style="display: flex;">
                    <div class="sort-down">下移</div>
                    <div class="sort-asc">上移</div>
                </div>
                <div>
                    内容33333
                </div>
            </div>
        </div>





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

<!-- 开发时，请从此处开始复制代码 end -->

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