気ままにふりーだむ

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

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

正規表現全然わからん!でもまとめる!

正規表現について、まとめます! 使うときのためにメモ。 \d 1個の半角数字(0123456789) \dは「1個の半角数字」なので、\d\dは「半角数字2個」の意味 [crayon-5dee6319 …

no image

[Rails]deviseを実装する

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

no image

[Rails]ヘルパーメソッドを作る!

こんにちは! 今回はヘルパーメソッドについてのまとめです。 ヘルパーメソッドを自分で作成してみたいと思います。 それでは早速いってみましょう! そもそもヘルパーメソッドとは そもそもヘルパーメソッドな …

no image

[Rails]deviseのファイル構成

こんばんは。 表題の件について、どのページでみたかは忘れてしまったのですが、 deviseをinstallした時に作成されるファイルの構成をメモのため、 投稿します。参照元がわかったらまた追記させてい …

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

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