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

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

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

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

jQuery

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

HTML

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

Q&A

解決済

4回答

6946閲覧

同一クラス名が複数ある場合のjquery要素に対してのイベント

domidomi

総合スコア34

JavaScript

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

jQuery

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

HTML

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

0グッド

0クリップ

投稿2017/11/16 04:19

#質問

html

1<p class="a">aiueo</p> 2<p class="a">aiueo</p> 3<p class="a">aiueo</p> 4<p class="a">aiueo</p>

みたいに同一クラス名が複数存在していた時に、それをjQueryで指定しremoveする関数を書きました。

javascript

1$(function(){ 2 $('.a').click(function(){ 3 $(this).remove(); 4 }); 5});

自分の予想では$('.a')で[a]というクラス名の要素が全部jquery要素化して配列で選択?されていると思っていたので、クリックをすると[a]というクラス名の書かれているp要素全てが消えると思っていました。

しかし、消えたのはクリックされたp要素である一要素のみでした。

私の考えの「$('.a')で[a]というクラス名の要素が全部jquery要素化して配列で選択?されている」が間違っていると思うのですがどこがおかしいでしょうか?

初めて使用するのでおかしな文章や、ルール違反があったらすみません。
よろしくお願いします。

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

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

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

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

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

guest

回答4

0

ベストアンサー

「$('.a')で[a]というクラス名の要素が全部jquery要素化して配列で選択?されている」が間違っている

その通りです。
$('.a')は単なる要素選択で、.clickを付けることでその要素に対してのイベントを追加しています。
なので件のコードではすべての$('.a')要素にclickイベントが追加されている状態となります。
その上で$(this).remove();とした場合、thisが示すのは当然自分自身のみなので、消されるのも自分自身です。

やりたい状況がいまいち想像できませんが、とある要素のクリック時に同じ属性(今回で言えばclass=aのもの)をすべて消し去りたいなら、こうでしょうかね。

JavaScript

1$(function(){ 2 $('.a').click(function(){ 3 $('.a').remove(); 4 }); 5});

投稿2017/11/16 04:29

ShikaTech

総合スコア468

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

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

domidomi

2017/11/16 04:55

文字が装飾されていてとても読みやすかったです、ありがとうございます。 >すべての$('.a')要素にclickイベントが追加されている この考え方がぬけていたようです。
guest

0

$('.a')は確かにグループですが、その中でthisを指定しているので
セレクタ自身を引き継ぐのではなくそのオブジェクトのみが対象になります。
(each的な処理)

こうすると少しわかりやすいかもしれません。

javascript

1$('.a').click(function(){ 2 console.log($(this).length); 3 console.log($('.a').length); 4});

投稿2017/11/16 04:31

yambejp

総合スコア114572

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

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

domidomi

2017/11/16 04:56

実行してみたところ要素数の差が目で見て分かりました。 ありがとうございます。
guest

0

$(function(){ $('.a').click(function(){ $(this).remove(); }); });

このスクリプトでは「class='a'」という属性値を持つすべてのElementにイベントを登録しています。

クリックイベントが発生すると、イベントが発生したElement(=$(this))を対象にイベント登録された処理が実行されます。

よって、「クリックされた(イベントが発生した)Elementのみが削除される(登録済み処理が実行される)」という結果になるのです。

投稿2017/11/16 04:26

tkturbo

総合スコア5572

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

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

domidomi

2017/11/16 04:54

「イベントを登録」この考え方が抜けていたようです。 とても助かりましたありがとうございます。
guest

0

既に終わった質問ですが、
イベントのバブリングに着目するとイメージし易いかもしれないですね。

HTML

1<div class="p"> 2 <p> 3 <strong>test</strong> 4 </p> 5</div> 6<div class="p" /> 7<div class="p" /> 8<div class="p" />

この状態でdiv.pにクリックイベントを仕込んでstrongタグ内でクリックすると。
ブラウザによって生み出されたイベントを司る女神様が現れます。
下記のような順番で質問してきます。

  1. このstrongをクリックしたのはあなたですね? あら、でもイベントの関数が登録されてないわね…
  2. このpをクリックしたのはあなたですね? あら、でもイベントの関数が登録されてないわね…
  3. このdivをクリックしたのはあなたですね? 正直者は大好きです、ではこの関数を実行しましょう。

「このdivをクリックした」ということは、
対象が$('.p')ではなく、this(エレメント)であることの現れと考えて良いでしょう。

投稿2017/11/16 05:43

miyabi-sun

総合スコア21158

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

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

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

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

ただいまの回答率
85.50%

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

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

質問する

関連した質問