jQuery を使用して順序なしリストを並べ替える

この記事の例では、jQueryが順序なしリストの並べ替え関数を実装する方法について説明します。参考までに皆さんと共有してください。詳細は次のとおりです:

jQuery を使用して順序なしリストを並べ替える原理は、次のとおりです: 順序なしリスト内のすべてのリスト項目を取得し、配列形式に変換し、 JavaScript を使用します 関数 並び替えて再度出力します。使用される jQuery 関数には、ready()、get()、

text()、each()、append()、および JavaScript 関数 sort() が含まれます。

1. jQuery 関数の紹介
(1) jQuery 関数 get() -- 一致する要素のセットを取得する
この関数は、一致するすべての要素を取得するための下位互換性のある方法です (実際には要素の配列である jQuery オブジェクト とは異なります) ）。その構文は次のとおりです:
object.get()

注: この関数は、jQuery オブジェクトの代わりに DOM オブジェクト を直接操作したい場合に非常に便利です。

(2) jQuery 関数 text() -- 要素の内容を取得および設定します

この関数は、一致する要素のテキストの内容を取得および設定します。構文は次のとおりです:

object.text([val|fn])

注: val パラメーターと fn パラメーターはオプションです。 val は要素のテキスト コンテンツ値を設定します。fn(index, text) 関数は 2 つのパラメーターを受け入れて string を返します。index はコレクション内の要素の index 位置、text は元のテキストです。価値。

(3) jQuery 関数 append() -- コンテンツを要素に追加します

この関数は、一致する各要素にコンテンツを追加します。構文は次のとおりです。

object.append(content|fn)

注: この操作は、指定された要素に対して appendChild メソッドを実行し、それらをドキュメントに追加することに似ています。 content パラメータは、追加されたコンテンツを表します。fn (index, html) は、一致する各要素に追加する HTML 文字列を返します。index パラメータは、このコレクション内のオブジェクトのインデックス値です。オブジェクトの元の HTML 値。

2． JavaScript 関数の紹介

JavaScript 関数 sort() -- 要素の並べ替え。配列要素の並べ替えに使用されます。構文は次のとおりです:

arrayObject.sort([sortby])

注: sortby はオプションで、並べ替え順序を指定し、関数である必要があります。戻り値はソートされた配列そのものです。このメソッドが引数なしで呼び出された場合、配列内の要素はアルファベット順に並べ替えられます。正確には、文字エンコーディングの順序に従ってソートされます。これを実現するには、まず、比較のために配列要素を (必要に応じて) 文字列に変換します。

他の基準で並べ替えたい場合は、2 つの値を比較し、2 つの値の相対的な順序を示す数値を返す比較関数を提供する必要があります。比較関数には 2 つのパラメータ a と b が必要で、その戻り値は次のとおりです。a が b より小さい場合、ソートされた配列内で a が b より前に出現する必要があり、0 より小さい値が返されます。 a が b と等しい場合、0 が返されます。 a が b より大きい場合、0 より大きい値が返されます。

3.関数の実装

順序なしリストの項目並べ替え機能を実装する手順は次のとおりです。

(1) すべてのリスト項目を取得し、配列に読み込みます。

(2) 配列オブジェクトをソートします。

(3) ソートされた配列を順序なしリストに補充します。

まず、jQuery ライブラリを導入します:

<script language="JavaScript" src="jquery-1.7.2.min.js"></script>

次に、次の並べ替え関数コードを追加します:

<script language="JavaScript" type="text/JavaScript">
 $(document).ready(function(){
  var items = $(".orderobj li").get(); //获取所有待排序li装入数组items
  items.sort(function(a,b) //调用JavaScript内置函数sort
  {
    var elementone = $(a).text();
    var elementtwo = $(b).text();
    if(elementone < elementtwo) return -1;
    if(elementone > elementtwo) return 1;
   return 0;
 });
 var ul = $(".orderobj");
 $.each(items,function(i,li)
 //通过遍历每一个数组元素，填充无序列表
 {
   ul.append(li);
 });
 });
</script>

上記のコードは、array を介してリストを並べ替え、リスト項目が順序付けされるように順序付けられていないリストを補充します。具体的な効果は写真の通りです:

以上がjQuery を使用して順序なしリストを並べ替えるの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。