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

Question

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

<div class="contents">
  <div class="abc" id="abc">
    <p>テキスト1</p>
  </div>
  <div class="def" id="def">
    <p>テキスト2</p>
  </div>
  <div class="ghi" id=ghi">
    <p>テキスト3</p>
  </div>
</div>

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

$('#abc, #def')

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

$('.classname')

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

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

Comments

[m.ts10806]

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

[hedgehog1242]

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

[m.ts10806]

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

[hedgehog1242]

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

[m.ts10806]

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

[hedgehog1242]

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

Answer 1

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

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

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

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

Comments

[hedgehog1242]

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