hiramatch's blog

iOSアプリ開発に目覚め、毎日勉強の日々です。

jQueryのフィルターを使った簡単なプログラム

jQuery JavaScript

最近お世話になっているドットインストールで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>

以下は実行画面です

f:id:hiramatch:20151130225848p:plain