セレクターその６（グループセレクター）
サンプルでは "," の両サイドに半角スペースを挿入しているけどつなげるとどうなるんだろう。
複数のセレクターを,(カンマ)区切りで並べて指定できるのが「グループセレクター」です。それぞれのセレクターに対する命令をまとめて記述できます。
<html> <head> <script type="text/javascript" src="http://www.google.com/jsapi"></script> <script type="text/javascript">google.load("jquery", "1.3.2");</script> <script type="text/javascript"> $(function() { $("#first , #third").css("color","red"); $("#second,#fourth").css("color","green"); //つなげてみた。 }) </script> </head> <body> <span class="second">グループ指定バージョン</span> <ul> <li id="first">テキストテキストテキストテキストテキスト</li> <li id="second">テキストテキストテキストテキストテキスト</li> <li id="third">テキストテキストテキストテキストテキスト</li> <li id="fourth">テキストテキストテキストテキストテキスト</li> </ul> </body> </html>
いけるね。
多分他の種類のセレクターでもいけるんだろうなぁ。
<html> <head> <script type="text/javascript" src="http://www.google.com/jsapi"></script> <script type="text/javascript">google.load("jquery", "1.3.2");</script> <script type="text/javascript"> //グループセレクター＋子孫セレクターのテスト。 $(function() { $("#ID0,.class0 .class1").css("color","red"); }) </script> </head> <body> <span class="second">グループ指定バージョン</span> <ul> <li id="ID0">テキストテキストテキストテキストテキスト</li> <li class="class0">テキスト<span class="class1">テキスト</span>テキストテキストテキスト</li> <li class="class0">テキストテキスト<span class="class2">テキスト</span>テキストテキスト</li> <li class="class0">テキストテキストテキスト<span class="class1">テキスト</span>テキスト</li> </ul> </body> </html>
お〜、いけるねぇ。
※2010/3/1 追記
上記の例だと処理の優先順位については「子孫セレクター＞グループセレクター」になっているけど、
「グループセレクター＞子孫セレクター」な関係を表現することはできるんだろうか、という疑問が沸いた。
ひょっとしたらあとで表記方法がでてくるのかもしれないけど、とりあえず括弧でくくってみてもダメだったw
<html> <head> <script type="text/javascript" src="http://www.google.com/jsapi"></script> <script type="text/javascript">google.load("jquery", "1.3.2");</script> <script type="text/javascript"> $(function() { //class0とclass1をグループにして、それらの下にあるsubclass0を対象にしたい。 $("(.class0,.class1) .subclass0").css("color","red"); }) </script> </head> <body> <span class="second">グループ指定バージョン</span> <ul> <li class="class0"><span class="subclass0">テキスト</span>テキストテキストテキスト</li> <li class="class0">テキスト<span class="subclass1">テキスト</span>テキストテキスト</li> <li class="class1">テキストテキスト<span class="subclass0">テキスト</span>テキスト</li> <li class="class1">テキストテキストテキスト<span class="subclass1">テキスト</span></li> </ul> </body> </html>
ちゃんと処理できないみたいで、みんな黒字になってしまう。
これだとできる。やっぱりグループセレクターの方が処理の優先順位が低いらしい。
<html> <head> <script type="text/javascript" src="http://www.google.com/jsapi"></script> <script type="text/javascript">google.load("jquery", "1.3.2");</script> <script type="text/javascript"> $(function() { $(".class0 .subclass1,.class1 .subclass0").css("color","red"); }) </script> </head> <body> <span class="second">グループ指定バージョン</span> <ul> <li class="class0"><span class="subclass0">テキスト</span>テキストテキストテキスト</li> <li class="class0">テキスト<span class="subclass1">テキスト</span>テキストテキスト</li> <li class="class1">テキストテキスト<span class="subclass0">テキスト</span>テキスト</li> <li class="class1">テキストテキストテキスト<span class="subclass1">テキスト</span></li> </ul> </body> </html>
※2010/6/9 追記→2010/6/13 修正
一生見習いマンさんからアドバイス＋新情報を頂きました！
セレクタは第２引数に「コンテキスト」なるモノを指定可能なのだそうです。
つまり、「第２引数に指定したモノの配下に存在する、第１引数に該当するモノ」という指定が可能とのこと。
区別をしっかりつけるため、class2を追加してみています。
①が一生見習いマンさんが教えて下さった指定の仕方。
②は、ここの、「■セレクタにコンテキストを与えよう」で見つけた指定の仕方。
（※「jQuery セレクタ コンテキスト」あたりでググるといろいろでてきましたw）
<html> <head> <script type="text/javascript" src="http://www.google.com/jsapi"></script> <script type="text/javascript">google.load("jquery", "1.3.2");</script> <script type="text/javascript"> $(function() { //class0とclass1をグループにして、それらの下にあるsubclass0を対象にしたい。 //①これは一生見習いマンさんが教えて下さったやりかた。 $(".subclass0", ".class0,.class1").css("color","red"); //②こんな表現も可能みたい。 //$(".class0,.class1", $(".subclass0")).css("color","red"); }) </script> </head> <body> <span class="second">グループ指定バージョン</span> <ul> <li class="class0"><span class="subclass0">テキスト</span>テキストテキストテキスト</li> <li class="class0">テキスト<span class="subclass1">テキスト</span>テキストテキスト</li> <li class="class1">テキストテキスト<span class="subclass0">テキスト</span>テキスト</li> <li class="class1">テキストテキストテキスト<span class="subclass1">テキスト</span></li> <li class="class2">てきすとてきすとてきすと<span class="subclass0">てきすと</span></li> </ul> </body> </html>
更に、コンテキストを３種以上、つまりセレクタの引数を３つ以上指定可能か試してみました。（「調査」ではないところが微妙w）
以下のサンプルでは、上記のサンプルコードに対してさらにulタグを追加し、それぞれ「ul0」「ul1」クラスを指定しています。
<html> <head> <script type="text/javascript" src="http://www.google.com/jsapi"></script> <script type="text/javascript">google.load("jquery", "1.3.2");</script> <script type="text/javascript"> $(function() { //セレクタの引数は２つまでしか有効ではないみたい。 //以下のような指定をしても、ul0、ul1 の両方が処理対象になってしまっていて、 //意図した通りの処理が行われない。 //$(".subclass0", ".class0,.class1", ".ul1").css("color","red"); //$(".subclass0", $(".class0,.class1"), $(".ul1")).css("color","red"); //こんな記述にすると意図した通りに処理してくれるふう。ネストできるんだねぇ〜♪ $(".subclass0", $(".class0,.class1", ".ul1")).css("color","red"); }) </script> </head> <body> <span class="second">グループ指定バージョン</span> <div>ul0</div> <ul class="ul0"> <li class="class0"><span class="subclass0">テキスト</span>テキストテキストテキスト</li> <li class="class0">テキスト<span class="subclass1">テキスト</span>テキストテキスト</li> <li class="class1">テキストテキスト<span class="subclass0">テキスト</span>テキスト</li> <li class="class1">テキストテキストテキスト<span class="subclass1">テキスト</span></li> <li class="class2">てきすとてきすとてきすと<span class="subclass0">てきすと</span></li> </ul> <div>ul1</div> <ul class="ul1"> <li class="class0"><span class="subclass0">テキスト</span>テキストテキストテキスト</li> <li class="class0">テキスト<span class="subclass1">テキスト</span>テキストテキスト</li> <li class="class1">テキストテキスト<span class="subclass0">テキスト</span>テキスト</li> <li class="class1">テキストテキストテキスト<span class="subclass1">テキスト</span></li> <li class="class2">てきすとてきすとてきすと<span class="subclass0">てきすと</span></li> </ul> </body> </html>
複数のコンテキスト指定はできないみたいだけど、ネストするとできるっぽいですな。
一生見習いマンさん、ありがとうございました！
