jqueryでリストを配列に変換する-フロントエンドQ&A-php.cn

jqueryでリストを配列に変換する

PHPz

リリース： 2023-05-28 12:46:08

オリジナル

693 人が閲覧しました

jQuery を使用して JavaScript コードを作成する場合、リストを配列に変換する必要が生じることがよくあります。この記事では、jQuery のいくつかのメソッドを使用してリストを配列に変換し、リストをよりよく理解して使用できるようにする方法について説明します。

1. jQueryのmapメソッドを使用する

jQueryのmapメソッドは、リスト内の各要素を新しい値に変換し、これらの新しい値を新しい配列に形成して返すことができます。したがって、jQuery の map メソッドを使用してリストを配列に変換できます。

サンプルコードは次のとおりです:

var list = $("ul li");  //获取 <ul> 元素中的所有 <li> 元素
var array = $.map(list, function(item) {
  return item.textContent;
});
console.log(array);

ログイン後にコピー

上記のコードでは、まず jQuery の $() メソッドを使用して、すべての

要素を含むリストを取得し、それを変数に格納します。リスト。次に、jQuery の map メソッドを使用してリスト内の各要素を反復処理し、その内容 (textContent) を新しい配列の要素値として使用します。最後に、新しい配列をコンソールに出力します。

2. jQuery の each メソッドを使用する

map メソッドの使用に加えて、jQuery の each メソッドを使用してリストを配列に変換することもできます。 each メソッドは配列やオブジェクトを走査するための一般的なメソッドであり、各データに対して同じ操作を実行できます。 each メソッドは、map メソッドとは異なり、新しい配列を返すのではなく、データ処理の結果を元の配列に格納します。

サンプルコードは次のとおりです:

var list = $("ul li");  //获取 <ul> 元素中的所有 <li> 元素
var array = [];  //创建一个空数组，用于存储处理后的结果
$.each(list, function(index, item) {
  array.push(item.textContent);
});
console.log(array);

ログイン後にコピー

上記のコードでは、最初に jQuery の $() メソッドを使用して、すべての

要素を含むリストを取得し、それをリスト内の変数。次に、処理結果を格納する空の配列を作成し、 each メソッドを使用してリスト内の各要素を反復処理し、その内容 (textContent) を配列に入れます。最後に、新しい配列をコンソールに出力します。

3. JavaScript の Array.from メソッドを使用する

jQuery でネイティブ JavaScript の Array.from メソッドを使用して、リストを配列に変換することもできます。このメソッドは、配列のようなオブジェクト (DOM ノードリストなど) または反復可能なオブジェクト (セットやマップなど) を実際の配列に変換します。

サンプルコードは次のとおりです:

var list = $("ul li");  //获取 <ul> 元素中的所有 <li> 元素
var array = Array.from(list).map(function(item) {
  return item.textContent;
});
console.log(array);

ログイン後にコピー

上記のコードでは、最初に jQuery の $() メソッドを使用して、すべての

要素を含むリストを取得し、それを変数リストの真ん中。次に、ネイティブ JavaScript の Array.from メソッドを使用してリストを配列に変換し、map メソッドを使用して新しい配列を反復処理し、各要素のテキストコンテンツを含む配列に変換します。最後に、新しい配列をコンソールに出力します。

結論

この記事の導入部を通じて、jQuery でリストを配列に変換する方法を理解できたと思います。注目に値するのは、map メソッドと each メソッドを使用すると、リスト内の各要素のより洗練された処理を実行でき、Array.from メソッドを使用すると、配列のようなオブジェクトを実際の配列に簡単に変換できることです。したがって、実際のニーズに応じて適切な方法を選択すると、コードの効率と可読性が向上します。

以上がjqueryでリストを配列に変換するの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。