So verwenden Sie das Plug-in zum Sortieren von Seiteninhalten jSort_jquery

Wenn die Seitenliste viel Inhalt enthält, müssen wir den Inhalt möglicherweise auf eine bestimmte Weise sortieren, beispielsweise nach Alphabet oder Größe. In diesem Artikel wird das Sortier-Plug-in jSort zum Sortieren von Seiteninhalten verwendet.
Das jSort-Plug-in kann beliebige Inhalte auf der Seite sortieren (Tabellen, Listen, div-Elemente), ist browserübergreifend kompatibel und sehr leichtgewichtig.

Operationsrendering:

XHTML
Stellen Sie zunächst die JQuery-Bibliothek und das JSort-Plug-In im Kopfteil vor.

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/ 
jquery.min.js"></script> 
<script type="text/javascript" src="jquery.jsort.0.4.js"></script> 

Dann fügen Sie den folgenden Code direkt zum Text hinzu:

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

Es ist ersichtlich, dass die HTML-Struktur aus zwei Steuerschaltflächen und dem Inhaltswiedergabebereich div#divs besteht.
CSS
Verwenden Sie CSS, um HTML-Seiten zu verschönern.

#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} 

jQuery
Wenn Sie auf die Steuerschaltfläche klicken, wird das jSort-Plugin aufgerufen, um den Inhalt zu sortieren. Bitte beachten Sie den Code:

$("#asc_btn").click(function(){ 
  $("#divs").jSort({ 
    sort_by: "h3.title", 
    item: "div", 
    order: "asc" 
  }); 
}); 

Das jSort-Plugin bietet mehrere konfigurierbare Parameter:
item: zeigt auf das HTML-Inhaltselement, das sortiert werden muss. Der Standardwert ist div. In diesem Beispiel ist der Inhalt im div sortiert.
sort_by: zeigt auf das Element innerhalb des Elements, das sortiert werden muss. Der Standardwert ist p.
Reihenfolge: Sortiermethode, aufsteigende Reihenfolge, absteigende Reihenfolge, die Standardeinstellung ist aufsteigend.
is_num: Ob nach numerischer Größe sortiert werden soll, der Standardwert ist false.
sort_by_attr: Ob nach HTML-Elementattributen sortiert werden soll, der Standardwert ist false.
attr_name: Attributname. Wenn sort_by_attr auf true gesetzt ist, können Sie nach den Attributen der entsprechenden Elemente sortieren. Wenn Sie chinesische Zeichenfolgen sortieren müssen, ist es am besten, nach Attributen zu sortieren. Der Wert des Attributs kann Buchstaben oder Zahlen sein.

Dies ist die Einführung in die Verwendung des Plug-Ins jSort, probieren wir es aus!