jquery对信息进行排序操作

最新推荐文章于 2019-04-26 16:15:00 发布

fuyangclj

最新推荐文章于 2019-04-26 16:15:00 发布

阅读量648

点赞数

分类专栏： Jquery 文章标签： jquery插件

本文链接：https://blog.csdn.net/clj9017/article/details/24630787

版权

Jquery 专栏收录该内容

19 篇文章 0 订阅

订阅专栏


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>ul列表排序</title>
<script src="jquery-1.7.1.min.js"></script>
</head>
<style>
a{ cursor:pointer;}
</style>
<script>
$(function(){
    $("#list > li > a").click(function(){
        if( $(this).attr("class") == 'up' ){
            if( $(this).parent("li").index() == 0 ){
                alert("你已经在最顶部！");    
            }else{
                var vsort = $(this).parent("li").prev("li").attr("sort");
                $(this).parent("li").prev("li").attr("sort",$(this).parent("li").attr("sort"))
                var html = $(this).parent("li").prev("li");
                $(this).parent("li").attr("sort",vsort);
                $(this).parent("li").after(html);
                //ajax请求 交换改变两个记录的排序值        
            }
        }else if( $(this).attr("class") == 'down' ){
            if( $(this).parent("li").index() == 4 ){
                alert("你已经在最底部！");    
            }else{
                var vsort = $(this).parent("li").next("li").attr("sort");
                $(this).parent("li").next("li").attr("sort",$(this).parent("li").attr("sort"))
                var html = $(this).parent("li").next("li");
                $(this).parent("li").attr("sort",vsort);
                $(this).parent("li").before(html);
                //ajax请求 交换改变两个记录的排序值                
            }
        }
    });
});
</script>
<body>
<ul id="list">
<li sort='1' rel="1" ><a class="up">up</a>&nbsp;<a class="down">down</a>第一条信息1</li>
<li sort='2' rel="2" ><a class="up">up</a>&nbsp;<a class="down">down</a>第一条信息2</li>
<li sort='3' rel="3" ><a class="up">up</a>&nbsp;<a class="down">down</a>第一条信息3</li>
<li sort='4' rel="4" ><a class="up">up</a>&nbsp;<a class="down">down</a>第一条信息4</li>
<li sort='5' rel="5" ><a class="up">up</a>&nbsp;<a class="down">down</a>第一条信息5</li>
</ul>
</body>
</html>