jQuery div排序

浏览数：589 / 时间：2015年06月09日

参考 http://www.dgpower.net/news/shownews/351.html

使用jSort插件

关于jSort参数

item - the path to the elements in your HTML layout which should be sorted. The default is "div".【待排序的div的wrapperDiv 也就是父div】
sort_by - the path to the text inside ‘item‘ which should be sorted. The default is "p".
order - ascending or descending sorting order ("asc" or "desc"). The default is "asc".
is_num - numerical sorting. The default is false.【默认是按照windows文件管理器的文件名排序方式不适合10位数以及更高位数字排序】
sort_by_attr - sorting by attribute. The default is false.
attr_name - attribute name. The default is "".

参考http://www.dgpower.net/news/shownews/351.html
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <title>Untitled Document</title>
    <STYLE TYPE="text/css">
    

#nav {
    width:100%;
    margin:10px auto;
}
#nav li {
    float:left;
    width:80px;
    height:24px;
    line-height:24px;
    margin-right:10px;
    border:1px solid #d3d3d3;
    background:#f7f7f7;
    text-align:center;
    cursor:pointer
}
#divs div {
    height:180px;
    margin:10px 0px;
    padding:15px;
    background:#f7f7f7;
    border-bottom:1px solid #ddd
}
#divs div img {
    float:left;
    width:240px;
    height:160px;
    margin:10px
}
#divs div h3 {
    line-height:24px;
    margin:10px 5px;
    font-size:16px;
    color:#456
}
#divs div p {
    line-height:22px;
    margin:6px 5px
}

</STYLE>
    <script type="text/javascript"
    src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
    <script src="jsort.js"></script>
    <script type="text/javascript">
$(function(){
    $("#asc_btn").click(function(){ 
        $("#divs").jSort({ 
            sort_by: "h3.title",/*根据class为title的H3的内容的值进行排序*/ 
            item: "div", 
            order: "asc" 
        }); 

    }); 
    $("#desc_btn").click(function(){ 
        $("#divs").jSort({ 
            sort_by: "h3.title", 
            item: "div.sorts", /*jQuery选择器  这里选择的是对class为sorts的div进行排序*/
            order: "desc" 
        }); 

    });     
});
</script>
</head>
<body>
    <ul id="nav">
        <li id="asc_btn">按标题↑</li>
        <li id="desc_btn">按标题↓</li>
    </ul>

    <div id="divs">
        <div>
            <img src="images/s1.jpg" alt="" />
            <h3 class="title">9.北京利比亚驻华大使馆升起反对派国旗</h3>
            <p>
                8月22日，xx利比亚驻华大使馆，门前的国旗已经更换成了反对派的国旗。22日上午11点左右， 
记者电话采访了利比亚驻华使馆，一位ccc工作人员告诉记者，目前未接到闭馆和工作调整的通知，使馆人员 
应该会照常上班。
            </p>
            <p>
                <a href="#">查看详情</a>
            </p>
        </div>

        <div class="sorts">
            <img src="images/s1.jpg" alt="" />
            <h3 class="title">1.北京利比亚驻华大使馆升起反对派国旗</h3>
            <p>
                8月22日，xx利比亚驻华大使馆，门前的国旗已经更换成了反对派的国旗。22日上午11点左右， 
记者电话采访了利比亚驻华使馆，一位ccc工作人员告诉记者，目前未接到闭馆和工作调整的通知，使馆人员 
应该会照常上班。
            </p>
            <p>
                <a href="#">查看详情</a>
            </p>
        </div>

        <div class="sorts">
            <img src="images/s1.jpg" alt="" />
            <h3 class="title">2.派国旗</h3>
            <p>
                8月22日，北京利比亚驻华大使馆，门前的国旗已经更换成了反对派的国旗。22日上午11点左右， 
记者电话采访了利比亚驻华使馆，一位中方工作人员告诉记者，目前未接到闭馆和工作调整的通知，使馆人员 
应该会照常上班。
            </p>
            <p>
                <a href="#">查看详情</a>
            </p>
        </div>

    </div>
</body>
</html>