Search

jQuery APIリファレンスDOM選択処理：フィルタリング

  1. eq(index)〔マッチした要素から指定したインデックス番号の要素を選択〕
  2. hasClass(class)〔要素の中に指定したクラスを持っている要素があるか調べる〕
  3. filter(expr)〔マッチした要素から指定した条件式にマッチした要素のみを選択 〕
  4. filter(fn)〔マッチした要素から指定した関数にマッチした要素のみを選択〕
  5. is(expr)〔要素の中に指定した条件式にマッチする要素があるか調べる〕
  6. map(callback)〔jQueryオブジェクトの中にある要素集合を、jQuery配列の中で、別の値集合に変換〕
  7. not(expr)〔マッチした要素集合から指定した条件式にマッチした要素を取り除く〕
  8. slice(start[, end])〔指定した範囲の要素を選択 〕

eq(index)
マッチした要素から指定したインデックス番号の要素を選択

2009/2/27

eq(index)　戻り値：jQuery

マッチした要素から指定したインデックス番号の要素を選択します。

  • 第1引数indexには、選択する要素のインデックス番号（0始まり）を指定します。
    最後の要素のインデックス番号は、要素の長さ-1になります。
    例えば、3番目の要素を選択する場合は、$(A).eq(2);のようにインデックス番号に「2」を指定します。

eq()の使用例サンプルを見る
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ja" lang="ja">
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
        <meta http-equiv="Content-Language" content="ja" />
        <meta http-equiv="Content-Script-Type" content="text/javascript" />
        <meta http-equiv="Content-Style-Type" content="text/css" />
        <meta http-equiv="imagetoolbar" content="no" />
        <title>DOM選択処理：フィルタリング：eq(index)の使用例 | jQuery</title>
        <link rel="stylesheet" type="text/css" href="/content/lib/global.css" />
        <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
        <script type="text/javascript">
            $(function(){
                /* 3番目のli要素にorangeクラスを追加 */
                $("#sample li").eq(2).addClass("orange");
            });
        </script>
        <style type="text/css">
            #sample ul { margin:0; padding:0; }
            #sample li { margin:0 10px 0 0; padding:0; float:left; list-style:none; width:100px; height:100px; line-height:100px; display:block; background-color:#fff; border:3px solid orange; text-align:center; }
            #sample li.orange { background-color:orange; color:#fff; }
        </style>
    </head>
    <body>
        <div id="wrap">
            <h1>DOM選択処理：フィルタリング：eq(index)の使用例 | jQuery</h1>
            <p>▼3番目のli要素にorangeクラスを追加します。</p>
<!-- CODE -->
            <div id="sample" class="cf">
                <ul>
                    <li>アイテム1</li>
                    <li>アイテム2</li>
                    <li>アイテム3</li>
                    <li>アイテム4</li>
                    <li>アイテム5</li>
                </ul>
            </div>
<!-- / CODE -->
        </div>
    </body>
</html>

hasClass(class)
要素の中に指定したクラスを持っている要素があるか調べる

2009/2/27

hasClass(class)　戻り値：真偽値

要素の中に指定したクラスを持っている要素があるか調べ、見つかった場合にTRUE、そうでない場合にFALSEを返します。 これは、("." + class)とするとするのの代わりです。

  • 第1引数classには、調べるクラスを指定します。

hasClass()の使用例サンプルを見る
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ja" lang="ja">
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
        <meta http-equiv="Content-Language" content="ja" />
        <meta http-equiv="Content-Script-Type" content="text/javascript" />
        <meta http-equiv="Content-Style-Type" content="text/css" />
        <meta http-equiv="imagetoolbar" content="no" />
        <title>DOM選択処理：フィルタリング：hasClass(class)の使用例 | jQuery</title>
        <link rel="stylesheet" type="text/css" href="/content/lib/global.css" />
        <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
        <script type="text/javascript">
            $(function(){
                $("#sample li").click(function(){
                        if($(this).hasClass("orange")){
                            $(this).animate({left: -10 }, 75)
                                .animate({ left: 10 }, 75)
                                .animate({ left: -10 }, 75)
                                .animate({ left: 10 }, 75)
                                .animate({ left: 0 }, 75);
                        }
                });
            });
        </script>
        <style type="text/css">
            #sample ul { margin:0; padding:0; }
            #sample li { position:relative; margin:0 10px 0 0; padding:0; float:left; list-style:none; width:100px; height:100px; line-height:100px; display:block; background-color:#fff; border:3px solid orange; text-align:center; }
            #sample li.orange { background-color:orange; color:#fff; }
        </style>
    </head>
    <body>
        <div id="wrap">
            <h1>DOM選択処理：フィルタリング：hasClass(class)の使用例 | jQuery</h1>
            <p>▼orangeクラスを持つli要素（赤枠のボックス）をクリックした時だけ、ボックスを左右に振動させます。<br>　それ以外のボックスをクリックしてもなにもおこりません。</p>
<!-- CODE -->
            <div id="sample" class="cf">
                <ul>
                    <li class="orange">アイテム1</li>
                    <li>アイテム2</li>
                    <li class="orange">アイテム3</li>
                    <li>アイテム4</li>
                    <li class="orange">アイテム5</li>
                </ul>
            </div>
<!-- / CODE -->
        </div>
    </body>
</html>

filter(expr)
マッチした要素から指定した条件式にマッチした要素のみを選択

2009/2/27

filter(expr)　戻り値：jQuery

マッチした要素から指定した条件式にマッチした要素のみを選択します。

このメソッドは、検索結果を絞るのに使用します。
複数のフィルタを指定する場合は、カンマ区切りで指定してください。

  • 第1引数exprには、フィルタリングする条件式を指定します。

filter(expr)の使用例サンプルを見る
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ja" lang="ja">
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
        <meta http-equiv="Content-Language" content="ja" />
        <meta http-equiv="Content-Script-Type" content="text/javascript" />
        <meta http-equiv="Content-Style-Type" content="text/css" />
        <meta http-equiv="imagetoolbar" content="no" />
        <title>DOM選択処理：フィルタリング：filter(expr)の使用例 | jQuery</title>
        <link rel="stylesheet" type="text/css" href="/content/lib/global.css" />
        <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
        <script type="text/javascript">
            $(function(){
                $("#sample li").css("background", "#fff")
                    .filter(".middle")
                    .css("border-color", "orange");
            });
        </script>
        <style type="text/css">
            #sample ul { margin:0; padding:0; }
            #sample li { margin:0 10px 0 0; padding:0; float:left; list-style:none; width:120px; height:4em; line-height:4em; display:block; border:3px solid #ccc; text-align:center; }
        </style>
    </head>
    <body>
        <div id="wrap">
            <h1>DOM選択処理：フィルタリング：filter(expr)の使用例 | jQuery</h1>
            <p>▼middleクラスを持つ要素のみオレンジ枠にします。</p>
<!-- CODE -->
            <div id="sample" class="cf">
                <ul>
                    <li>class=""</li>
                    <li class="middle">class="middle"</li>
                    <li class="middle">class="middle"</li>
                    <li class="middle">class="middle"</li>
                    <li>class=""</li>
                </ul>
            </div>
<!-- / CODE -->
        </div>
    </body>
</html>

filter(fn)
マッチした要素から指定した関数にマッチした要素のみを選択

2009/2/27

filter(fn)　戻り値：jQuery

マッチした要素から指定した関数にマッチした要素のみを選択します。

この関数は、$.eachのように、マッチした各要素で呼ばれます。
関数がFALSEを返す要素は取り除かれ、それ以外を返す要素は残ります。

  • 第1引数fnには、フィルタリングする関数を指定します。

    function callback(indexInJQueryObject) {
    var keepItBoolean = true;
    this; /* DOM要素 */
    return keepItBoolean;
}
filter(fn)の使用例サンプルを見る
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ja" lang="ja">
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
        <meta http-equiv="Content-Language" content="ja" />
        <meta http-equiv="Content-Script-Type" content="text/javascript" />
        <meta http-equiv="Content-Style-Type" content="text/css" />
        <meta http-equiv="imagetoolbar" content="no" />
        <title>DOM選択処理：フィルタリング：filter(fn)の使用例 | jQuery</title>
        <link rel="stylesheet" type="text/css" href="/content/lib/global.css" />
        <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
        <script type="text/javascript">
            $(function(){
                $("#sample li").css("background", "#fff")
                    .filter(function (index) {
                        return index == 1 || $(this).attr("id") == "fourth";
                    })
                    .css("border", "3px double orange");
            });
        </script>
        <style type="text/css">
            #sample ul { margin:0; padding:0; }
            #sample li { margin:0 10px 0 0; padding:0; float:left; list-style:none; width:120px; height:4em; line-height:4em; display:block; border:3px solid #ccc; text-align:center; }
        </style>
    </head>
    <body>
        <div id="wrap">
            <h1>DOM選択処理：フィルタリング：filter(fn)の使用例 | jQuery</h1>
            <p>▼すべてのボックスの色を変更し、特定のボックスに枠線をつけます。</p>
<!-- CODE -->
            <div id="sample" class="cf">
                <ul>
                    <li id="first">id="first"</li>
                    <li id="second">id="second"</li>
                    <li id="third">id="third"</li>
                    <li id="fourth">id="fourth"</li>
                    <li id="fifth">id="fifth"</li>
                </ul>
            </div>
<!-- / CODE -->
        </div>
    </body>
</html>

is(expr)
要素の中に指定した条件式にマッチする要素があるか調べる

2009/2/27

is(expr)　戻り値：真偽値

要素の中に指定した条件式にマッチする要素があるか調べ、マッチする要素がある場合にTRUE、そうでない場合にFALSEを返します。

jQuery v1.3からは、すべての条件式がサポートされるようになりました。 それ以前のバージョンでは、+、~、>のような階層構造セレクタを含む複雑な式は、常にTRUEを返していました。

filterは、内部的に使用されるため、そこに適用されるルールはすべて同様にここで適用されます。

  • 第1引数exprには、フィルタリングする条件式を指定します。

is()の使用例サンプルを見る
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ja" lang="ja">
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
        <meta http-equiv="Content-Language" content="ja" />
        <meta http-equiv="Content-Script-Type" content="text/javascript" />
        <meta http-equiv="Content-Style-Type" content="text/css" />
        <meta http-equiv="imagetoolbar" content="no" />
        <title>DOM選択処理：フィルタリング：is()の使用例 | jQuery</title>
        <link rel="stylesheet" type="text/css" href="/content/lib/global.css" />
        <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
        <script type="text/javascript">
            $(function(){
                $("#sample li").click(function(){
                    $("#res").text("");
                    if($(this).is(":first-child")){
                        $("#res").text("最初のli要素です");
                    }else if($(this).is(".red, .blue")){
                        $("#res").text("redクラスまたはblueクラスが指定されている要素です");
                    }else if($(this).is(":contains('class=\"purple\"')")){
                        $("#res").html("この要素のclass名は<strong>"+$(this).attr("class")+"</strong>です");
                    }else {
                        $("#res").html("この要素のid名は<strong>"+$(this).attr("id")+"</strong>です");
                    }
                    $("#res").hide().slideDown("slow");
                    $(this).css({"border-style":"inset","cursor":"default"});
                });
            });
        </script>
        <style type="text/css">
            #sample    { margin:0 0 1em 0; padding:0; overflow:hidden; }
            #sample li { margin:0 10px 0 0; padding:0;
                float:left;
                display:block;
                list-style:none;
                width:120px; height:4em;
                border:3px solid #ccc;
                background:#fff;
                line-height:4em;
                text-align:center;
            }
            #sample li.red    { background:red; color:#fff; }
            #sample li.blue   { background:blue; color:#fff; }
            #sample li.purple { background:purple; color:#fff; }
            #res { background-color:yellow; padding:10px; }
        </style>
    </head>
    <body>
        <div id="wrap">
            <h1>DOM選択処理：フィルタリング：is()の使用例 | jQuery</h1>
            <p>▼すべてのボックスの色を変更し、特定のボックスに枠線をつけます。</p>
<!-- CODE -->
            <div class="cf">
                <ul id="sample">
                    <li id="first">first</li>
                    <li id="second" class="red">class="red"</li>
                    <li id="third" class="blue">class="blue"</li>
                    <li id="fourth" class="purple">class="purple"</li>
                    <li id="fifth">fifth"</li>
                </ul>
            </div>
            <p id="res"></p>
<!-- / CODE -->
        </div>
    </body>
</html>

map(callback)
jQueryオブジェクトの中にある要素集合を、jQuery配列の中で、別の値集合に変換

2009/2/27

map(callback)　戻り値：jQuery

jQueryオブジェクトの中にある要素集合を、jQuery配列（要素を含んでいてもいなくてもよい）の中で、別の値集合に変換します。

値、属性、CSSなどの値の配列を作成することができます。 $map()を使用するための便利なメソッドとして提供されています。

  • 第1引数collbackには、要素集合内の各要素に実行する関数を指定します。

    function callback(index, domElement) {
    var replacement;
    this; // DOM要素
    // replacement == null : delete spot
    // replacement == array : insert the elements of the array
    // else replace the spot with replacement
    return replacement;
}
map()の使用例サンプルを見る
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ja" lang="ja">
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
        <meta http-equiv="Content-Language" content="ja" />
        <meta http-equiv="Content-Script-Type" content="text/javascript" />
        <meta http-equiv="Content-Style-Type" content="text/css" />
        <meta http-equiv="imagetoolbar" content="no" />
        <title>DOM選択処理：フィルタリング：map(callback)の使用例 | jQuery</title>
        <link rel="stylesheet" type="text/css" href="/content/lib/global.css" />
        <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
        <script type="text/javascript">
            $(function(){
                $("#res").append($("input").map(
                    function(){
                        return $(this).val();}
                    )
                    .get().join(", ")
                );
            });
        </script>
    </head>
    <body>
        <div id="wrap">
            <h1>DOM選択処理：フィルタリング：map(callback)の使用例 | jQuery</h1>
            <p>▼すべてのinput要素の値を配列として取得し、カンマ区切りの文字列にして表示。</p>
<!-- CODE -->
            <form action="#">
                <input type="text" name="name" value="東京ひよこ" />
                <input type="password" name="password" value="himitsu" />
                <input type="text" name="url" value="http://phpjavascriptroom.com/" />
            </form>
            <p id="res"><strong>入力値：</strong></p>
<!-- / CODE -->
        </div>
    </body>
</html>

not(expr)
マッチした要素集合から指定した条件式にマッチした要素を取り除く

2009/2/27

not(expr)　戻り値：jQuery

マッチした要素集合から指定した条件式にマッチした要素を取り除き、マッチしなかった要素を選択します。

  • 第1引数exprには、マッチする要素を取り除く条件式、要素集合から取り除く要素や要素の配列を指定します。

not()の使用例サンプルを見る
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ja" lang="ja">
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
        <meta http-equiv="Content-Language" content="ja" />
        <meta http-equiv="Content-Script-Type" content="text/javascript" />
        <meta http-equiv="Content-Style-Type" content="text/css" />
        <meta http-equiv="imagetoolbar" content="no" />
        <title>DOM選択処理：フィルタリング：not()の使用例 | jQuery</title>
        <link rel="stylesheet" type="text/css" href="/content/lib/global.css" />
        <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
        <script type="text/javascript">
            $(function(){
                /* redクラスあるいはID名がfifth以外の要素の枠線を赤色にする */
                $("#sample li").not(".red, #fifth").css("border-color", "red");
            });
        </script>
        <style type="text/css">
            #sample    { margin:0 0 1em 0; padding:0; overflow:hidden; }
            #sample li { margin:0 10px 0 0; padding:0;
                float:left;
                display:block;
                list-style:none;
                width:120px; height:4em;
                border:3px solid #ccc;
                background:#fff;
                line-height:4em;
                text-align:center;
            }
            #sample li.red    { background:red; color:#fff; }
            #sample li.blue   { background:blue; color:#fff; }
            #sample li.purple { background:purple; color:#fff; }
        </style>
    </head>
    <body>
        <div id="wrap">
            <h1>DOM選択処理：フィルタリング：not()の使用例 | jQuery</h1>
            <p>▼redクラスあるいはID名がfifth以外の要素の枠線を赤色にします。</p>
<!-- CODE -->
            <div class="cf">
                <ul id="sample">
                    <li id="first">first</li>
                    <li id="second" class="red">class="red"</li>
                    <li id="third" class="blue">class="blue"</li>
                    <li id="fourth" class="purple">class="purple"</li>
                    <li id="fifth">fifth"</li>
                </ul>
            </div>
<!-- / CODE -->
        </div>
    </body>
</html>

slice(start[, end])
指定した範囲の要素を選択

2009/2/27

slice(start[, end])　戻り値：jQuery

指定した範囲の要素を選択します。
組込型の配列のsliceメソッドのように動作します。

  • 第1引数startには、範囲指定の開始位置を指定します（最初の要素は0）。

  • オプションの第2引数endには、範囲指定の終了位置（最後の要素は含まない）を指定します。 省略すると、最後の要素までとなります。

slice()の使用例サンプルを見る
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ja" lang="ja">
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
        <meta http-equiv="Content-Language" content="ja" />
        <meta http-equiv="Content-Script-Type" content="text/javascript" />
        <meta http-equiv="Content-Style-Type" content="text/css" />
        <meta http-equiv="imagetoolbar" content="no" />
        <title>DOM選択処理：フィルタリング：slice()の使用例 | jQuery</title>
        <link rel="stylesheet" type="text/css" href="/content/lib/global.css" />
        <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
        <script type="text/javascript">
            $(function(){
                function colorEm() {
                    var $div = $("#sample li");
                    var start = Math.floor(Math.random() * $div.length);
                    var end = Math.floor(Math.random() * ($div.length - start)) + start + 1;
                    if (end == $div.length) end = undefined;
                    $div.css("background", "");
                    if(end){
                        $div.slice(start, end).css("background", "yellow");   
                    }else{
                        $div.slice(start).css("background", "yellow");
                    }
                    $("span").text('$("div").slice(' + start + (end ? ', ' + end : '') + ').css("background", "yellow");');
                }
                $("button").click(colorEm);
            });
        </script>
        <style type="text/css">
            #sample    { margin:0 0 1em 0; padding:0; overflow:hidden; }
            #sample li { margin:0 10px 0 0; padding:0;
                float:left;
                display:block;
                list-style:none;
                width:120px; height:4em;
                border:3px solid #ccc;
                background:#fff;
                line-height:4em;
                text-align:center;
            }
        </style>
    </head>
    <body>
        <div id="wrap">
            <h1>DOM選択処理：フィルタリング：slice()の使用例 | jQuery</h1>
            <p>▼ランダムにボックスを黄色にします。</p>
<!-- CODE -->
            <p><button>ランダムにボックスを黄色にする</button
            <div class="cf">
                <ul id="sample">
                    <li id="first">first</li>
                    <li id="second">second</li>
                    <li id="third">third</li>
                    <li id="fourth">fourth</li>
                    <li id="fifth">fifth</li>
                </ul>
            </div>
<!-- / CODE -->
        </div>
    </body>
</html>

関連コンテンツ

Q. このサイトの情報はお役に立ちましたでしょうか？

投票する 投票結果を見る

管理人に【web拍手】を送るweb拍手（1行メッセージも送れます♪）

TOP / ご利用上の注意点 / リンクについて / RSS

Valid: HTML検証, CSS検証, RSS検証

Thanks: Material Design 420 free icons

©2024 PHP & JavaScript Room All Rights Reserved.

pagetop

polarized women