最新文章：

首页 工作简记

jq根据li标签的属性值重新排序/用JQ重新倒序排列li

发布时间:2015年12月09日 评论数：抢沙发 阅读数：4603

    今天在给客户做一个网站时遇到下载文件列表后台没有排序选项，我知道在源代码里修改一个参数就可以实现我想要的结果，但是因为系统使用的是一个C#的开源系统，一般都不建议修改系统源代码。因为一旦修改，日后系统升级，网站就会出现难以预料的各种问题。
    总之，在网站模版文件里实现列表内容重新排序！


    HTML: 


    <ul id="test">
	<li>1</li>
	<li>2</li>
	<li>3</li>
	<li>4</li>
	<li>5</li>
	<li>6</li>
	<li>7</li>
	<li>8</li>
	<li>9</li>
</ul>


    运行结果是： 


    <ul id="test">
	<li>9</li>
	<li>8</li>
	<li>7</li>
	<li>6</li>
	<li>5</li>
	<li>4</li>
	<li>3</li>
	<li>2</li>
	<li>1</li>
</ul>
    -----------------------------------------------------------------------------------------------------------------------------------

    DEMO： 



    <html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<script type="text/javascript" charset="utf-8" src="http://www.hy01.cn/_other/jquery-1.11.2.min.js"></script>
<title>重新倒序排列li</title>

</head>

<body>
<ul id="test">
	<li>1</li>
	<li>2</li>
	<li>3</li>
	<li>4</li>
	<li>5</li>
	<li>6</li>
	<li>7</li>
	<li>8</li>
	<li>9</li>
</ul>
<script type="text/javascript">
	var liN=$('#test li').length;//获得li总个数
	for(var i=liN;i>=1;i--){
		$('#test').append('<li>'+$('#test li').eq(i-1).html()+'</li>');
		$('#test li').eq(i-1).remove();
		}
</script>
</body>
</html>
    此方法对div等其他标签同样有效


    今天发现另一个，根据li标签的属性值重新排序的方法 



    <script src="http://code.jquery.com/jquery-latest.js"></script>
<script type="text/javascript">
    $(function(){
        $("#abv").click(function(){
            var ar=new Array();
            var br=new Array();
            $("#albumsList li").each(function(){
                ar[ar.length]=$(this).attr("value");
            });
            br=ar.sort();
            for(var i=0;i<br.length;i++){//从小到大
            //for(var i=br.length-1;i>=0;i--){//从大到小
                $("#albumsList").append($("li[value="+br[i]+"]"));
            }
             
        });
    })
</script>
<input type="button" id="abv" value="测试用按钮"/>
<ul id="albumsList">
	<li value="1">1</li>
    <li value="3">2</li>
    <li value="4">3</li>
    <li value="2">4</li>
    <li value="8">5</li>
    <li value="5">6</li>
    <li value="7">7</li>
    <li value="6">8</li>
</ul>
    同样，此方法对div等其他标签同样有效


二维码加载中...
本文作者：帆子      文章标题： jq根据li标签的属性值重新排序/用JQ重新倒序排列li
本文地址：http://www.hy01.cn/post-24.html
版权声明：若无注明，本文皆为“梁鹏程个人主页-帆子博客”原创，转载请保留文章出处。
 相关文章