jQueryの基本(ID/クラスセレクター)

pタグは複数使われる場合が多いためタグ名だけでは、指定したいタグが絞り込めません。
そこで、よくつかわれるのが、タグのid属性や、class属性で絞り込む方法です。

たとえば、複数あるpタグの中から、class属性が”hoge”のタグだけ選択したい場合は
以下のようにします。

$('p.hoge')

おなじように、id属性が”foo”のタグだけ選択したい場合は以下のようにします。

$('p#foo')

例として”show”ボタンと”hide”ボタンを用意し、指定したタグに対して
表示/非表示の操作ができるサンプルを示します。






function clickClassHide(className){
        $('p.'+className).hide();
}
function clickClassShow(className){
        $('p.'+className).show();
}
function clickIdHide(idName){
        $('p#'+idName).hide();
}
function clickIdShow(idName){
        $('p#'+idName).show();
}



TEST1 ID STRING

TEST2 ID STRING

TEST1 CLASS STRING

TEST2 CLASS STRING

この場合divタグすべてを選択したことになります。
そこで、class属性に”hogehoge”を持ったdivタグだけ選択したい!
という場合は以下のようにします。

また、タグは条件にせず、”hogehoge”というクラスをもったタグ全て
を選択したい場合は以下のようになります。

$('.hogehoge')

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

次のHTML タグと属性が使えます: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>