Welcome to ClipClip!
Already a Member? Sign In
The clip (ID 85019) is not found.
 

ASCII.jp:初めてのjQuery:セレクターAPIを一挙解説(前編)|Web制作の現場で使えるjQuery UIデザイン入門

source: http://ascii.jp/elem/000/000/439/439414/index-5.html

clipped by poundhound Sep 14, 2009

jquery

  • ■間接セレクター

     特定のセレクターの後に出現する要素を指定できるのが「間接セレクター」です。セレクターと要素を ~(チルダ)で結びます。



    ▼サンプルコード(HTML部分)

    
    <ul>
        <li id=
                      "first">テキストテキストテキストテキストテキスト</li>
        <li id=
                      "second">テキストテキストテキストテキストテキスト</li>
        <li id=
                      "third">テキストテキストテキストテキストテキスト</li>
        <li id=
                      "fourth">テキストテキストテキストテキストテキスト</li>
    </ul>
    



    ▼サンプルコード(スクリプト部分)

    
    $(function(){
        $("#second ~ li").css("color","red");
    })
    



    ▼実行結果(実際のWebページ

     id属性にsecondが付けられた要素の後ろに登場するli要素、つまり3行目以降のli要素が赤色になります。ただし、本記事執筆時点(2009年7月)ではFirefox3で正常に動作しないようです。

    サンプル10
 

Comments

No comments yet

Please sign in to comment.