jqueryオブジェクトからarrayオブジェクトへの配列

はじめに

Web 開発では、ドキュメント オブジェクト モデル (DOM) の操作に優れた JavaScript ライブラリである jQuery がよく使用されます。 jQuery は、要素の選択、イベントの追加などの操作を簡素化する一連の関数を提供します。ただし、jQuery を使用して操作する場合、jQuery オブジェクトを JavaScript 配列またはオブジェクト配列に変換する必要がある場合があります。場合によっては、jQuery オブジェクト内の要素を走査して変更する必要があるためです。

この記事では、主に jQuery オブジェクトが配列およびオブジェクト配列に変換される方法を紹介し、読者の参考のためにいくつかの実用的なアプリケーション シナリオを提供します。

jQuery オブジェクトを配列に変換する

jQuery では、toArray() 関数を使用して jQuery オブジェクトを配列に変換できます。この関数は、jQuery オブジェクト内のすべての要素を JavaScript 配列に変換し、その配列を返します。

たとえば、次の HTML フラグメントがあるとします。

<ul id="myList">
  <li>Item 1</li>
  <li>Item 2</li>
  <li>Item 3</li>
</ul>

次のコードを使用して、このページ内のすべての li 要素を取得できます。

var $myList = $('#myList');
var $myListItems = $myList.find('li'); // 获取所有的li元素

Now, $ myListItems は jQuery オブジェクトです。 console.log() 関数を使用して、その内容を表示できます。

console.log($myListItems);

コンソールでは、次のような出力が表示されます。

[li, li, li]

この出力は、$myListItems が A であることを示しています。 3 つの li 要素を含む jQuery オブジェクトは、toArray() 関数を使用して JavaScript 配列に変換できます。

var myListItemsArray = $myListItems.toArray();

myListItemsArray は 3 つの li 要素を含む JavaScript 配列です。

jQuery オブジェクトをオブジェクト配列に変換する

jQuery オブジェクトを JavaScript 配列に変換することに加えて、オブジェクト配列に変換する必要がある場合もあります。この目標を達成するには、map() 関数を使用します。 map() 関数は、jQuery オブジェクトを反復処理して各要素に対してコールバック関数を実行し、各要素の戻り値を新しい配列に結合して、その配列を返します。

以下の実際的な例を考えてみましょう。以下に示すようなユーザー データを含む JSON オブジェクトがあるとします。

var users = [
  {"id": 1, "name": "Alice", "age": 23},
  {"id": 2, "name": "Bob", "age": 27},
  {"id": 3, "name": "Charlie", "age": 31},
  {"id": 4, "name": "David", "age": 19},
  {"id": 5, "name": "Emma", "age": 25},
  {"id": 6, "name": "Frank", "age": 36},
  {"id": 7, "name": "Grace", "age": 32},
  {"id": 8, "name": "Henry", "age": 41},
  {"id": 9, "name": "Ivy", "age": 28}
];

次に、このデータに基づいてユーザー名と年齢を含む HTML リストを作成する必要があります。 jQuery を使用してこのリストを作成できます:

var $userList = $('<ul>');
$(users).map(function(index, user) {
  var $userListItem = $('<li>');
  $userListItem.text(user.name + ' (' + user.age + ')');
  $userList.append($userListItem);
});

これで、ユーザー データを含むリストが作成されました。このリスト要素をドキュメントに追加できます:

$('body').append($userList);

この例では、map() 関数を使用してユーザー データをオブジェクトの配列に変換し、ユーザー情報を含む HTML リストを作成します。

概要

この記事では、jQuery オブジェクトを JavaScript 配列およびオブジェクト配列に変換する方法について説明します。 toArray() 関数を使用して jQuery オブジェクトを JavaScript 配列に変換し、map() 関数を使用して jQuery オブジェクトをオブジェクト配列に変換できます。これらの手法は、DOM 要素の走査と変更、JSON データの処理など、Web 開発における一般的な問題に対処するときに役立ちます。

以上がjqueryオブジェクトからarrayオブジェクトへの配列の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。