気ままにふりーだむ

学習やメモなどを投稿します。プログラミング仲間や仕事、求人の話は大募集。気軽にフォローやいいねいただけると励みになります!

jQuery プログラミング

jQueryでmapメソッドを使う!

投稿日:

mapメソッドについてまとめます!
基本的にはeachメソッドと同じ。jQueryオブジェクトの場合は記載が違うので注意は必要。
またmapメソッドの引数として関数を使用する方法について記載します。

配列の場合

今回は配列breadsの各値に「メニュー0:あんぱん」のように
先頭に「メニュー番号:」と付与したいと思います。
下記では配列breadsをmapメソッドで繰り返し処理を行い
「”メニュー” + 番号 + “:” + 値」とした後、配列menuへ格納しています。

var menu = $.map(breads,function(bread,index) {
eachメソッドとの違いはfunction(bread,index)と変数の順番が逆になっていることです。
各値を取得し処理を行なった後、順番通り配列menuに格納しています。

オブジェクトの場合

オブジェクトでも同様に行ってみます。記載方法は変わりません。

jQueryオブジェクトの場合

jQueryオブジェクトの場合は2点変わります。
まず1点目は、mapメソッドの記載方法が変わっています。
function前も「.map(」となっていたり、「breads,」だったのが
「$(“.breads”).」と「,」から「.」に変わっていたり注意です!
var menu = $.map(breads,function(bread,index) {
var menu = $(".breads").map(function(index,bread) {

2点目は変数の順番が逆。eachメソッドと同じになっています。
(bread,index)
(index,bread)

それでは上記を気にしていただきながら、
コードをご確認いただけたらと思います。

$(bread).innerHTMLは値を表示しています。

mapメソッドの引数に関数を使う方法

mapメソッド内の処理が多くなってくると別に関数を定義した方がわかりやすくなります。
今回は「メニュー番号:」と付与をしている処理を別関数として定義します。

addMenuとして関数を定義

mapメソッドの引数としてaddmenuを呼び出す

上記により、関数addMenuの変数indexに番号が、
変数breadにmapメソッドで取得した値が入り、
処理が行われた後、配列menuに結果が格納されます。

それでは最後に全体のコードを記載します。

-jQuery, プログラミング

執筆者:


comment

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

関連記事

no image

[Ruby]「class クラス名 end」という記述じゃないクラス定義

クラス定義は通常下記のように行いますよね。

上記を用いないでクラス定義する方法について学んだのでメモ。 結論からいうと下記のような記載 …

画像アップロードCarrierwaveを導入する

画像アップロードのGem Carrierwaveの導入方法を忘れちゃうので、手順をメモ。 今回は画像リサイズのためmini_magickも導入します Gemfileを設定 それでは早速、下記Gemをイ …

チャットアプリにメッセージの編集と削除ボタンをつける

やりたいこと 現在チャットアプリを作っており、投稿したメッセージの編集と削除を行うために まずはボタンを配置したいと思っています。またそのボタンは常時表示させるのでなく、 該当メッセージにカーソルが当 …

Materializeとsimple_formでシンプルでいい感じのフォームを作りたい!

マテリアルデザイン「Materialize」とフォームの記述がシンプルな「simple_form」の実装をしたので、メモ。 GemfileにGemを記載からのbundle install [crayo …

no image

[Rails]deviseを実装する

こんにちは。 ログイン機能を実装する便利なGem deviseの導入方法をまとめます。 それでは早速はじめます。 まずはGemfileにdeviseを記載します。 [crayon-5d5a8efe84 …