2010 年 3 月 30 日
jQuery 知らなかった子要素の選択方法
DesignReviver
http://designreviver.com/wp-content/uploads/2008/10/example.html
に下記の記述があったのですが、なにかよくわかりませんでした。
$("ul",this)
これは$(this)の中のul要素を選択する時などに使うと思われますが、
初めて見てしまいました。
知らないとはおっかないね。
DesignReviver
http://designreviver.com/wp-content/uploads/2008/10/example.html
に下記の記述があったのですが、なにかよくわかりませんでした。
$("ul",this)
これは$(this)の中のul要素を選択する時などに使うと思われますが、
初めて見てしまいました。
知らないとはおっかないね。
これもやってることは同じだと思います。
$("div:eq(2)").addClass("test"); $("div").eq(2).addClass("test");
場面によって使い分ける形で。
セレクタだったか、関数だったかとこんがらがってました。
両方ありました。
$(“#test:eq(2)”)で
$(“#test:eq[2]”)ではない
IDがspan_existsのチェックボックスをのチェックで
日付フォームの表示を切り替える。
こんなセレクタがいくのかと思ってましたが、いくもんですね。
$(":checkbox#span_exists").change(function(){ $("#span_area").toggle(); });
:eq(n)は「該当する要素集合のn番目」ですが、
:nth-child(n)は「各親要素のn番目」だそうです。
nthはれっきとした英語だそうで、数学で習う不定の数を表す n に -th が付いたようなものだそうです。
意味的にも、何度目かのといった具合のニュアンスなのかしら?
やったのに忘れそうなのでメモします。
table.sampleの最初の行以外をホバーした時に
クラスを適用します。
$(“table.sample tr:not(:first)”).hover(
function(){
$(this).addClass(“selected”);
},function(){
$(this).removeClass(“selected”);
}
);
カレンダーで、未来のtdには.future、データが見つからないものには.notfound
というクラスを適用していましたが
JQueryにてbackground-imageを変える際、このクラスには適用したくなかったので。
普通です。
$("#calendar td:not(.notfound,.future)").hover( function(){$(this).css("background-image","url(images/hover.png)"}, function(){$(this).css("background-image","url(images/normal.png)"} );
さらに空白のタグも選びたくない場合
$("#calendar td:not(.notfound,.future,:empty)")
としたら出来ました。
:not()の中に:emptyがあって、不思議です。