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

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

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

HTML5 (Hyper Text Markup Language、バージョン 5)は、マークアップ言語であるHTMLの第5版です。

jQuery

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

Q&A

解決済

1回答

1511閲覧

複数の要素をjQueryで取得する方法について

hedgehog1242

総合スコア1

HTML5

HTML5 (Hyper Text Markup Language、バージョン 5)は、マークアップ言語であるHTMLの第5版です。

jQuery

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

0グッド

0クリップ

投稿2020/09/07 04:18

編集2020/09/07 13:26

例えば以下のようなHTMLに対して、jQueryで複数の要素を取得する場合、
以下のどちらが実装方法として適切でしょうか。ご教示お願いいたします。
例としてclass名"abc"、"ghi"の要素(実際の要素数は十数個あります)に対して
同じ処理を行いたい場合です。処理自体はshowメソッドなどの軽い処理を想定しています。

HTML

1<div class="contents"> 2 <div class="abc" id="abc"> 3 <p>テキスト1</p> 4 </div> 5 <div class="def" id="def"> 6 <p>テキスト2</p> 7 </div> 8 <div class="ghi" id=ghi"> 9 <p>テキスト3</p> 10 </div> 11</div>

パターン1
各idをセレクタに羅列する

JavaScript

1$('#abc, #def')

パターン2
要素を取得するために新たなclassを各要素に対して付与して指定する

JavaScript

1$('.classname')

既に対象の要素にスタイルが定義された共通のclass名が指定されていればパターン2を選択するのですが、
私的には要素を取得することを目的とした中身のないclassを指定するのが少し気持ち悪いです。
また、取得する要素の数にもよるかと思いますが、実行速度の面においてもidで取得する方法の方が良い気がしています。

上記以外により良い方法がございましたらご教示お願い致します。

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

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

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

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

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

m.ts10806

2020/09/07 04:22

>$(‘#idname1’ #idname2’) これはそもそも文法として正しくないので論外では?
hedgehog1242

2020/09/07 04:27

m.ts10806さん 大変失礼しました。質問を修正いたしました。
m.ts10806

2020/09/07 04:28

ただ、要件次第ですね。 その要素を取得して何をしたいのか。 そこまで含めて「実行速度(パフォーマンス)」になると思います。 要素取得するだけなら数が同じになるならそう大差ないと思います。
hedgehog1242

2020/09/07 04:51

m.ts10806さん ご回答ありがとうございます。 なるほど。取得した要素に対してオーバーヘッド?のかかるような処理をする場合でなければ実行速度としては大差ないと理解しました。 可読性としてはどうでしょうか。 要素を取得するためにclassを付与するというのは割と一般的な実装方法なのでしょうか。
m.ts10806

2020/09/07 04:56

>可読性としては 大差ないとは思いますが、判断するための材料が足りません。 想定しているもの含めて質問本文に追記いただけますか?
hedgehog1242

2020/09/07 12:58 編集

m.ts10806さん ご回答ありがとうございます。 質問事項を具体化しましたが、いかがでしょうか。 そこまでの大差はなさそうですかね。。
guest

回答1

0

ベストアンサー

jQueryでまとめて扱いたいということは、何らかの同じような処理を行いたいということだろうと想像します。

個人的にはパターン2の方が好みです。理由としては、後々類似の要素が追加された時に、classを指定するだけで同じ動きが適用できるのが良いと感じます。

逆に、パターン1のIDを羅列するパターンですが、IDは要素に1つしかつけれないのに、それをjQueryの選択用に使用してしまうというのが、「中身のないclassを指定する」よりマズいのではないかなぁと思います。
また、他の画面で使い回しができませんし、適用したい対象が増えるたびにjQueryセレクタ中のIDが増えていくというのはイマイチかなと思います。

どちらのパターンでも動いていればそれは正解だと思います。

投稿2020/09/07 05:43

編集2020/09/07 06:09
YakumoSaki

総合スコア2027

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

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

hedgehog1242

2020/09/07 14:07

ご回答いただきありがとうございます。 YakumoSakiさんの仰る通り、複数の要素に対して同じような処理を実施したいです。 >後々類似の要素が追加された時に・・ 確かにそうですね。。変更内容によってはhtmlのみの修正で済む場合があるのに対し、 id属性の場合は適用対象が増えるたびにセレクタに追加しなくてはならいのは確かによろしくない気がします。。保守性の観点から具体例を含めたわかりやすい回答をいただきありがとうございました。
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

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

ただいまの回答率
85.50%

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

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

質問する

関連した質問