jq根据li标签的属性值重新排序/用JQ重新倒序排列li - 梁鹏程个人作品集,梁鹏程博客,帆子博客,微语,网站模版

梁鹏程个人作品集,帆子博客

  • 工作笔记
  • 工作简记
  • 微语
  • 建站资讯
  • 网站模板
  • 单页模板
  • 最新碎语:爱而不得的时候,再爱就不礼貌了~

    您的位置:梁鹏程个人作品集,帆子博客 >工作简记> jq根据li标签的属性值重新排序/用JQ重新倒序排列li

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

    今天在给客户做一个网站时遇到下载文件列表后台没有排序选项,我知道在源代码里修改一个参数就可以实现我想要的结果,但是因为系统使用的是一个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

    分享到:

    发表评论

    路人甲 表情
    看不清楚?点图切换 Ctrl+Enter快速提交
    
    召唤伊斯特瓦尔