当页面列表中有很多内容时，我们可能需要以某种方式对内容进行排序，比如按字母或大小排序。在本文中，我们将使用排序插件jSort对页面内容进行排序。jSort插件可以对页面上的任何内容(表、列表、div元素)进行排序，这种排序方式跨浏览器兼容，并且非常轻量级。

运行渲染：

首先，XHTML在头部引入了jquery库和jSort插件。

脚本类型=' text/Javascript ' src=' http :http://Ajax . googleapis.com/Ajax/libs/jquery/1 . 4 . 2/jquery . min . js '/脚本脚本类型=' text/Javascript ' src=' http : jquery . jsort . 0 . 4 . js '/脚本然后正文直接添加以下代码：

ul id=' nav ' Li id=' ASC _ BTN ' by title/Li Li id=' desc _ BTN ' by title/Li/ul div id=' divs ' div img src=' http 3360 images/s 1 . jpg ' alt=' '/H3 class=' title ' 1。22日上午11时许，记者电话采访了利比亚驻华大使馆。一名中国工作人员告诉记者，他没有收到任何关闭和工作调整的通知，使馆工作人员应该照常上班。/p pa href='# '查看详细信息/a/p /div.从多个div/div可以看出，HTML结构由两个控制按钮和内容呈现区div # divs组成。用CSS美化html页面。

# nav { width :100%；margin:10px汽车；} # nav li { float:left宽度：80 px；height:24px线高：24 px；右边距：10 px；border:1px固体# d3d3d3background : # f7f 7；文本对齐：居中；cursor : pointer } # div s div { height :180 px；margin:10px 0pxpadding:15pxbackground : # f7f 7；border-bottom :1 px solid # DDD } # divs div img { float : left；宽度width:240px高度：160 px；margin :10 px } # div s div H3 { line-height :24 px；margin:10px 5pxfont-size :16 px；color : # 456 } # divs div p { line-height :22 px；Margin:6px 5px} jQuery当您单击控制按钮时，调用jSort插件对内容进行排序。请查看代码：

$('#asc_btn ')。单击(function(){ $('#divs ')。jSort({ sort_by: 'h3.title '，item: 'div '，order : ' ASC ' })；});jSort插件提供了几个可配置的参数：item:引用要排序的html内容元素，默认值为div。在这个例子中，div中的内容被排序。Sort_by:指项目中需要排序的元素。默认值为p。在本例中，h3.title将被排序。顺序：排序方式，asc-顺序，desc-逆序，默认为asc。Is_num:是否按数字大小排序，默认为false。Sort_by_attr:是否按html元素属性排序，默认值为false。属性的名称。如果sort_by_attr设置为true，则可以根据相应元素的属性进行排序。如果需要对中文字符串进行排序，最好根据属性设置排序，属性的值可以是字母也可以是数字。

这就是如何使用插件jSort。开始吧！