jqueryで複数の要素を指定するには

jqueryを勉強中です。
ブログ内の＃mainというボックス要素にあるimgへ
自動的にdata-lightboxをつけようと下のようなスクリプトを設置しました。
＜script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.5. …＞＜/script＞
＜script type="text/javascript"＞
$(function(){
$('#main a').each(function(i){
if( $(this).find('img').length ) {
$(this).attr('data-lightbox','number' + (i+1));
}
});
});
＜/script＞

上記は正常に動いたのですが、
#main要素以外のボックス要素も指定したいです。
複数の要素を指定するにはどう記述すればよいのでしょうか？
初歩的なことだと思うのですが、タイトルのようなワードで調べても分からず、
どういうキーワードで調べていいのかも行き詰ってしまい
こちらで質問させていただきました。
よろしくお願いします。

質問者からの補足コメント

• 外部リンクのバナーなどがあるので、指定した要素にのみ適用させたいです。
  
  jQuery セレクターで検索し、'#main a,#side a'を入れてみました。
  #mainは適用されましたが#sideには適用されませんでした。

  No.1の回答に寄せられた補足コメントです。 補足日時：2015/06/07 15:10

• 後出しで申し訳ありません、
  適用されなかった#sideには#mainにあるブログ記事を読み込ませています。
  ＜script＞
  $(function(){
  $("#side").load("ブログ記事URL .entryBody", function(data) {
  if(data == null){
  $("#side").append("読込みに失敗しました");
  }
  });
  });
  ＜/script＞
  
  読み込みではなく直接#sideに画像を貼った場合だとlightboxが反映されたので
  これが原因だということは分かったのですが解決には至っていません。
  上記のように別ページを読み込んでいる場合の複数セレクタはどう指定すればよいのでしょうか？
  当たり前だとは思うのですが、.entryBodyを指定しても反映されませんでした。

    補足日時：2015/06/08 13:38

• 申し訳ないです、補足に書き足した通りの状況で上手くいかないようです。
  読み込みではなく普通にリンク画像を貼るとlightboxが動作しました。

  No.2の回答に寄せられた補足コメントです。 補足日時：2015/06/08 13:41

No.1 回答者： DoubtOwl 回答日時： 2015/06/07 09:35

#mainを外せばすべてのaタグに対して処理を行います。

$('a').each(function(i){
...

「jQuery セレクター」などで検索するとHITします。
http://semooh.jp/jquery/

No.2 回答者： fujillin 回答日時： 2015/06/08 09:19

セレクタとしては

＞'#main a,#side a'を入れてみました。
で良いはずですけれど…
IMG要素を入れ忘れているとか、リンク要素の中に無いとかはありませんか？


＞どういうキーワードで調べていいのかも行き詰ってしまい～
jQueryの本家サイトがありますからそこで調べるのが一番です。
　http://jquery.com/

セレクタに関してなら
　http://api.jquery.com/category/selectors/

ご質問なさっている、複数セレクタは
　http://api.jquery.com/multiple-selector/

No.3 ベストアンサー 回答者： DoubtOwl 回答日時： 2015/06/08 15:00

オブジェクトを読み込んだ後でdata-lightboxを付加する必要があるのでコールバック関数の中で処理しましょう。

＜script＞
$(function(){
$("#side").load("ブログ記事URL .entryBody", function(data) {
if(data == null){
$("#side").append("読込みに失敗しました");
}
else{
$('#side a').each(function(i){
if( $(this).find('img').length ) {
$(this).attr('data-lightbox','number' + (i+1));
}
});
}
});
});
＜/script＞

この回答へのお礼

わざわざ例まで書いていただき、説明も簡素で分かりやすかったです。
ありがとうございました！

お礼日時：2015/06/08 15:41

No.4 回答者： fujillin 回答日時： 2015/06/08 15:13

ANo2です。

＞適用されなかった#sideには#mainにあるブログ記事を読み込ませています
全体がどうなっているかわかりませんが、察するところ、ご質問のスクリプト実行時にはまだ記事の読み込みが終了していないものと推測されます。
それなので、いくらセレクタで指定していても、該当する要素が（未だ）存在しないので、処理されていないように見えるということではないかと。
(ANo2で記した「IMG要素の入れ忘れ」に近い状態と言えます）
というわけで、問題点は、多分、セレクタの問題ではなく、処理のタイミングではないかと思われます。

＞読み込みではなく直接#sideに画像を貼った場合だとlightboxが反映されたので
＞これが原因だということは分かったのですが解決には至っていません。
この状況からも、原因は上記ではないかと推測します。


＞上記のように別ページを読み込んでいる場合の複数セレクタはどう
＞指定すればよいのでしょうか？
＞当たり前だとは思うのですが、.entryBodyを指定しても
＞反映されませんでした。
原因が推測通りだとすれば、セレクタの問題ではなく実行のタイミングの問題です。


対処法としては、#sideの内容に関しては読込が終わってからご質問の処理を行うということになるでしょう。
一方、#mainはdocument.ready時に処理可能ですが、遅らせても良ければ#sideと同時に（複数セレクタで）、そうでなければ、#sideだけ遅らせて処理をするというふうになさればよろしいかと。

#sideの読み込みが終わってから処理をさせるには、最初にご提示の
　$(function(){～～});
の中ではなく、補足でご提示なさっている
　$("#side").load("ブログ記事URL .entryBody", function(data) {～～});
の function(data){～～} 内に記すことで、そのタイミングで実行することができます。

この回答へのお礼

なるほど、よく分かりました。2度もありがとうございます！

お礼日時：2015/06/08 15:37