もっと便利に!jQueryでラクラクサイト制作(実践サンプル付き)

第2回楽にリストをストライプ模様にする

各種セレクタ

第1回ではjQueryを使ったclassを自動で追加するサンプルを見てもらいました。HTMLのどの部分に適応するのかを指定するためのセレクタも紹介しましたが、第1回で紹介したのは、そのごくわずか一部だけです。

第2回では、第1回で紹介しきれなかったセレクタや、それらを使った実践サンプルを紹介いたします。

基本(Basics)

セレクタ選択箇所・補足
タグ$('p')タグを選択
#id$('#id')id名を持つ箇所を選択
.class$('.class')class名を持つ箇所を選択
.class.class$('.class1.class2')(複数の)class名を持つ箇所を選択※1
*(全ての要素)$('*')全ての要素を選択
セレクタ,セレクタ,…$('#id1,#id2')同時に複数のセレクタを選択※2

※1例の場合:class="class1 class2"
※2例の場合、id="id1"とid="id2"の2箇所

CSS指定の時などの時にも使うセレクタと同じなので、コーダーの方などには馴染み深く、また、初めて使ってみるときになど試してみやすいセレクタだと思います。

最初は複雑に考えずに、適応させたい部分にid名などをつけて利用してみてください。

階層(Hierarchy)

セレクタ選択箇所・補足
ancestor descendant$('#wrap p')階層を選択※3
parent > child$('#content > *')親子関係で選択※4
prev + next$('#content + *')前後関係で選択※4
prev ~ siblings$('#content ~ p')兄弟関係で選択※5

※3ancestor(先祖)とdescendant(子孫)の関係での選択です。
※4直下の要素のみの選択です。
※5prev以降の要素と同階層の要素を選択します。

タグ名やclass名などは、HTML全体のなかから該当する部分全てが選択されます。CSSと同じ指定で、選択範囲を絞る場合は#wrap p⁠id="wrap"のタグに囲まれた中にあるpタグ)のように半角スペースを入れて指定します。このセレクタは、子孫要素が先祖要素の直下だけでなく、該当する全ての要素を選択することになります。

基本フィルタ(Basic Filters)

セレクタ選択箇所・補足
:first$('li:first')要素の最初だけを選択
:last$('li:last')要素の最後だけを選択
:not(セレクタ)$('p a:not(p span a)')指定した要素を除外した要素を選択
:even$('li:even')偶数番目の要素を選択※6
:odd$('li:odd')奇数番目の要素を選択[*6]
:eq(index)$('li:eq(2)')指定したindexの要素を選択※6
:gt(index)$('li:gt(3)')指定したindexの要素より後ろの要素を選択※6
:lt(index)$('li:lt(4)')指定したindexの要素より前の要素を選択※6
:header$(':header')h1やh2などの見出し要素を選択
:animated$(':animated')アニメーション中の要素を選択

※6最初の要素は0番目

ここで注意したいのは、要素の数え方。最初は0番目となります。:oddや:evenもその0番目から考えての偶数奇数で選択されます。

ここでのフィルタはHTML全体の中から該当の一つを選択します。ブロックごとでの最初や最後などの該当部分はなくて、ページ全体で考えての位置になります。

コンテントフィルタ(Content Filters)

セレクタ選択箇所・補足
:contains(テキスト)$('div:contains("テキスト")')指定したテキストを含む要素を選択
:empty$('td:empty')空の要素を選択
:has(セレクタ)$('p:has(span)')指定したセレクタを子要素に持つ要素を選択
:parent$('td:parent')子要素もしくはテキストを持つ要素を選択

表示・非表示フィルタ(Visibility Filters)

セレクタ選択箇所・補足
:hidden$('div:hidden')非表示中の要素を選択※7
:visible$('input:visible')表示中の要素を選択

※7display:none;の要素と、type="hidden"の要素

属性フィルタ(Attribute Filters)

セレクタ選択箇所・補足
[属性]$('[id]')指定した属性を持つ要素を選択
[属性=値]$('input[name="inputname"]')指定した属性が特定の値を持つ要素を選択
[属性!=値]$('input[name!="inputname"]')指定した属性が特定の値を持たない要素を選択
[属性^=値]$('a[href^="http://"]')指定した属性の最初の文字が一致した要素を選択
[属性$=値]$('a[href$=".jpg"]')指定した属性の最後の文字が一致した要素を選択
[属性*=値]$('input[name*="man"]')指定した属性の一部の文字が一致した要素を選択
[属性1][属性2][属性N]$('input[id][name$="man"]')複数の指定した属性全てを持つ要素を選択

子要素フィルタ(Child Filters)

セレクタ選択箇所・補足
:nth-child(index/even/odd/equation)$('ul li:nth-child(2)') 各親要素に対して指定した子要素を選択※8
:first-child$('ul li:first-child')各親要素に対して最初の子要素を選択※8
:last-child$('ul li:last-child')各親要素に対して最後の子要素を選択※8
:only-child$('div button:only-child')各親要素で子要素が一つの場合、その子要素を選択

※8最初の要素は1番目

このセレクタは、基本セレクタの時と違い、最初が1番目となります。:nth-child(odd)や:nth-child(even)も偶数番目と奇数番目を選択するのですが、最初が1となるため、:oddや:evenなども選択される位置が逆になるということは覚えて起きましょう。

また、各ブロックごとでの該当部分の選択となるのも、基本セレクタとの違いです。各リストごとに最初と最後や指定の位置などを選択する場合は、こちらのセレクタを利用するようにしましょう。

フォーム(Forms)

セレクタ選択箇所・補足
:input$(':input')input、textarea、select、button要素を選択
:text$('input:text')type属性がtextの要素を選択
:password$('input:password')type属性がpasswordの要素を選択
:radio$('input:radio')type属性がradioの要素を選択
:checkbox$('input:checkbox')type属性がcheckboxの要素を選択
:submit$('input:submit')type属性がsubmitの要素とbutton要素を選択
:image$('input:image')type属性がimageの要素を選択
:reset$('input:reset')type属性がresetの要素を選択
:button$('input:button')type属性がbuttonの要素とbutton要素を選択
:file$('input:file')type属性がfileの要素を選択

フォームフィルタ(Form Filters)

セレクタ選択箇所・補足
:enabled$('input:enabled')フォームの利用可能箇所を選択※9
:enabled$('input:disabled')フォームの利用不可箇所を選択※9
:checked$('input:checked')チェック状態の要素を選択
:selected$('select option:selected')選択状態の要素を選択

※9disabled="disabled"がフォームの利用不可箇所

組み合わせで

第1回で最後に紹介したサンプルで、a[href^="http://"]で要素を選択したのですが、サイト内リンクであっても、リンクをhttp://ではじめてしまったら、それも選択されてしまう状態でした。これをうまく回避する方法はいくつかあるのですが、セレクタの組み合わせだけでも回避することができます。

それは:not()を組み合わせて使うことでサイト内のリンクだけは選択しないようにできるのです。

$('a[href^="http://"]:not(a[href^="http://site.domain"])')

CMSなどで自動でリンクが入ってしまうような場合などで活用できます。

他にも組み合わせることで対応の幅も広がりますので、各種セレクタは頭に入れておくことをおススメします。

実践例

今回はいろいろなセレクタを見てもらったのですが、その最後に、自動的にclassをつける実践例をもう一つご紹介します。

実践サンプル HTML
<ul id="samp1">
    <li>サンプルリスト1</li>
    <li>サンプルリスト2</li>
    <li>サンプルリスト3</li>
    <li>サンプルリスト4</li>
    <li>サンプルリスト5</li>
    <li>サンプルリスト6</li>
    <li>サンプルリスト7</li>
    <li>サンプルリスト8</li>
    <li>サンプルリスト9</li>
    <li>サンプルリスト10</li>
</ul>
実践サンプル CSS
.odd{
    background-color: #e60012;
    color: #ffffff;
}
.even{
    background-color: #ffffff;
    color: #e60012;
}
実践サンプル jQuery
$$(function(){
    $('li:nth-child(odd)').addClass('odd');
    $('li:nth-child(even)').addClass('even');
});

今回の実践サンプルはリストをストライプ模様にするスクリプトです。今回のはリストだけでなく、テーブルでも活用できます。一つずつclassを追加してストライプ模様にするよりも楽に色分けできます。

リストやテープルを見やすくする目的でも、このストライプの色分けは便利です。

実践サンプルの表示結果
実践サンプルの表示結果

実践サンプルを実行すると、実際にどのようになったのか、Firebugを使ってHTMLをチェックしてみましょう。

実践サンプルをFirebugで見た結果
実践サンプルをFirebugで見た結果

交互にoddとevenのclassがついているのがわかると思います。

今回はブロックごとで使える:nth-child()を使用しました。ストライプにするブロックが複数ある場合などでは、この:nth-child()を使うことで、偶数奇数ずれることなく表示させることができます。

この他にも、今回のフィルタなどを利用することで、自動的にclassを追加して楽に色分けなども可能です。classを一つ一つ追加するのではなく、自動的につけて、楽にサイト製作をしてみてはいかがでしょうか。

おすすめ記事

記事・ニュース一覧