jQueryのフィルターを使った簡単なプログラム
最近お世話になっているドットインストールでjQueryを学習しています。
今日学んだフィルターを使った簡単なプログラムを作ってみました。
以下はフィルタで対象となった要素の文字色を変えるものです。
<!DOCTYPE html> <html lang="ja"> <head> <meta charset="utf-8"> <title>フィルタ</title> </head> <body> <p>aaaaaa</p> <ul id="sub"> <li>3-0</li> <li>3-1 <ul> <li class="item">3-1-1</li> <li>3-1-2</li> <li class="item">3-1-1</li> </ul> </li> <li class="item">3-2</li> <li class="item">3-3</li> <li>3-4</li> </ul> <script src="https://code.jquery.com/jquery-1.11.3.js"></script> <script> $(function(){ // 9行目のul直下のliのインデックス2番が対象 // $('#sub > li:eq(2)').css('color','red'); // 9行目のul直下のliのインデックス2番より後が対象 // $('#sub > li:lt(2)').css('color','red'); // 9行目のul直下のliのうち偶数インデックスが対象 $('#sub > li:even').css('color','red'); }) </script> </body> <html>
以下は実行画面です
