質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
85.53%
JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

jQuery

jQueryは、JavaScriptライブラリのひとつです。 簡単な記述で、JavaScriptコードを実行できるように設計されています。 2006年1月に、ジョン・レシグが発表しました。 jQueryは独特の記述法を用いており、機能のほとんどは「$関数」や「jQueryオブジェクト」のメソッドとして定義されています。

HTML

HTMLとは、ウェブ上の文書を記述・作成するためのマークアップ言語のことです。文章の中に記述することで、文書の論理構造などを設定することができます。ハイパーリンクを設定できるハイパーテキストであり、画像・リスト・表などのデータファイルをリンクする情報に結びつけて情報を整理します。現在あるネットワーク上のほとんどのウェブページはHTMLで作成されています。

Q&A

解決済

1回答

8843閲覧

動的に生成したDOM要素に対してjQuery の「.each」は使えますか?

huwatoro

総合スコア19

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

jQuery

jQueryは、JavaScriptライブラリのひとつです。 簡単な記述で、JavaScriptコードを実行できるように設計されています。 2006年1月に、ジョン・レシグが発表しました。 jQueryは独特の記述法を用いており、機能のほとんどは「$関数」や「jQueryオブジェクト」のメソッドとして定義されています。

HTML

HTMLとは、ウェブ上の文書を記述・作成するためのマークアップ言語のことです。文章の中に記述することで、文書の論理構造などを設定することができます。ハイパーリンクを設定できるハイパーテキストであり、画像・リスト・表などのデータファイルをリンクする情報に結びつけて情報を整理します。現在あるネットワーク上のほとんどのウェブページはHTMLで作成されています。

0グッド

0クリップ

投稿2019/05/11 00:46

編集2019/05/11 01:10

動的に生成したDOM要素に対して、「.each」のように「その全部に適用して」というのをやりたいのですが、方法はありますか?

つまり、

###「.click」の場合
たとえばこれは

jquery

1$(button).click(function(){ 2 var name = $(this).attr('data-name'); 3 $(this).html(name); 4});

こうして「.onバージョン」がありますよね。

jquery

1$(document).on("click", "button", function(){ 2 var name = $(this).attr('data-name'); 3 $(this).html(name); 4});

###「.each」の場合は?
ではこれはどうなのでしょうか?
「.onバージョン」はないのでしょうか?

jquery

1$("button").each( function() { 2 var name = $(this).attr('data-name'); 3 $(this).html(name); 4});

###目的
この目的としては、Ajaxで
<button data-name="いろんな値" type="button">空っぽ</button>
というのが出力されるので、この「空っぽ」の部分に「いろんな値」を、JSで挿入したいという感じです。

気になる質問をクリップする

クリップした質問は、後からいつでもMYページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

m.ts10806

2019/05/11 00:50

動的要素の生成部分となんのどういうイベントで処理を行いたいかを記載してください
m.ts10806

2019/05/11 00:50

というか同じ内容を反映させるならeachしなくてもいいような。
huwatoro

2019/05/11 01:01 編集

>動的要素の生成部分となんのどういうイベントで処理を行いたいかを記載してください 質問の最後に「目的」として書いておきました。伝わるでしょうか。 >というか同じ内容を反映させるならeachしなくてもいいような。 わかりやすいようにコードを直しておきました。
m.ts10806

2019/05/11 01:05

htmlの生成がJavaScriptではなくPHPである時点で出ているhtmlは動的ではなく静的ですよ。 このタイトルや内容だと「JavaScriptで動的に作ったhtml」のような印象を受けるので内容調整していただければと。回答の方向性が全く変わってきますし、「ではこれはどうなのでしょうか? 」とあげられたコードに対して自身が実行した結果どうだったのかが書かれていないので、「何が問題課題なのか不明」(非推奨)です。
huwatoro

2019/05/11 01:10 編集

すいません動的はAJAXで考えてください。
CHERRY

2019/05/11 01:12

そのajax で追加するコードが実行されるタイミングと jQuery の処理が実行されるタイミングは、いつでしょうか?
m.ts10806

2019/05/11 01:14

要件の後付けが多すぎます。前提や背景があるのでしたら全て記載しておいてください。 1つ前のコメントでも指摘させていただきましたように、内容次第で回答の方向性が変わってきます。 内容に不明点や考えられる方向があるとそれだけ的確な回答につながらなくなる可能性が高まります。 何かしらでエスパー回答がついたとしても「そういう意味じゃなくてこういう前提があって」「既にそこは調べて試した」となると回答が無駄になります。 書かれたことしか汲み取れません。本当に何も調べず試さず丸投げする人との区別は他人には不可能です。 いっそのこと、ヘルプ一通り読んで質問テンプレート利用して書き直したほうがいいくらいですね。 こちら幾らコメントで追記されましてもデフォルト非表示なので目につきにくいです。
huwatoro

2019/05/11 01:21 編集

@CHERRYさん チェックボックスにチェックしたらajaxで「目的」にあるボタンが出力するので、その直後にそのボタンの「空っぽ」を書き換えたい感じです。なので「.each」は動的に使えるのかなって思いました。
退会済みユーザー

退会済みユーザー

2019/05/11 08:02

質問者しゃんの、「動的に生成したDOM要素」については、「“非同期で”動的に生成したDOM要素」と言うようにしたら良いと思うのでちゅ。 しょうすれば、象しゃんみたいに重箱の隅をつついて叩き壊す人にいぢめられる事は無くなると思うのでちゅ。
guest

回答1

2

ベストアンサー

DOM追加後に$("button").each()が呼び出されるならば、静的/動的にかかわらず、普通にすべてのボタンが処理対象になると思います。動的に追加したボタンだけを処理対象とする必要があるなら、クラス名で判別するのがよいのではないでしょうか。


下記のコードで、動的に追加したボタンもeachで処理できることを確認しました。

HTML

1<html> 2<head> 3<script src="https://code.jquery.com/jquery-3.4.1.min.js"></script> 4<script> 5$(function() { 6 $('#current_button').on('click', function() { 7 $('body').append($('<button>').text('new_button')); 8 $('button').each(function() { 9 console.log($(this).text()) 10 }); 11 }); 12}); 13</script> 14</head> 15<body> 16<button id="current_button">click</button> 17</body> 18</html>

投稿2019/05/11 03:26

編集2019/05/11 03:54
iwamot

総合スコア1154

huwatoro, kei344👍を押しています

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

iwamot

2019/05/11 03:35

と書いてから自信がなくなってきました。あとで試してみます。
iwamot

2019/05/11 03:50

試しました。動的に追加したボタンも処理対象になりました。試したコードは下記です。読みづらかったらすみません。 <html> <head> <script src="https://code.jquery.com/jquery-3.4.1.min.js"></script> <script> $(function() { $('#current_button').on('click', function() { $('body').append($('<button>').text('new_button')); $('button').each(function() { console.log($(this).text()) }); }); }); </script> </head> <body> <button id="current_button">click</button> </body> </html> Ajaxではありませんが、動的にボタンを追加してからeachを回しているという点では、ご質問の意図に沿っていると思います。
iwamot

2019/05/11 03:51

やっぱり化けましたね・・・。適宜お読み替えください。
kei344

2019/05/11 03:52

回答文は編集できるので、追記されてはいかがでしょう。
iwamot

2019/05/11 03:53

ありがとうございます。そうですね。回答文も修正します。
huwatoro

2019/05/11 04:40

お手数おかけしました。良い方法をどうもありがとうございます。勉強させていただきます。
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
85.53%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

同じタグがついた質問を見る

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

jQuery

jQueryは、JavaScriptライブラリのひとつです。 簡単な記述で、JavaScriptコードを実行できるように設計されています。 2006年1月に、ジョン・レシグが発表しました。 jQueryは独特の記述法を用いており、機能のほとんどは「$関数」や「jQueryオブジェクト」のメソッドとして定義されています。

HTML

HTMLとは、ウェブ上の文書を記述・作成するためのマークアップ言語のことです。文章の中に記述することで、文書の論理構造などを設定することができます。ハイパーリンクを設定できるハイパーテキストであり、画像・リスト・表などのデータファイルをリンクする情報に結びつけて情報を整理します。現在あるネットワーク上のほとんどのウェブページはHTMLで作成されています。