jQuery filter（）の例

投稿日: 2019-11-05 2019-11-05
タグ: jquery, jquery traversing

jQueryフィルタ関数は、一致するセレクタまたは関数のテストを使用して、一致する要素のセットから要素を抽出するのに便利な機能です。

1.フィルター（セレクター）

一致する要素のセットで、filter（）セレクタにのみ一致する要素を取得します。

例えば、

$("div").filter("#div1").css('background-color', 'blue');

すべてのdiv要素を一致させ、idが “div1″であるdiv要素を選択し、要素の背景色を青に変更します。

2.フィルター（関数）

一致する要素のセットで、関数のテストに合格する要素を取得します。この関数は、一致する要素のインデックスを表すindexパラメーターを内部で渡します。カウントは0からカウントされます。

例えば、

$('div').filter(function(index) {
    if(index==2 || index==3){//0 index based
        return true;
    }
}).css('background-color', 'blue');

すべてのdiv要素を一致させ、3番目（2）と4番目（3）のdiv要素のみを選択する関数でフィルタします。

$('div').filter(function(index) {
    return $("b", this).length == 1;
}).css('background-color', 'blue');

すべてのdiv要素を一致させ、<b>タグを含むdiv要素を選択する関数でフィルタします。

jQuery filter（）の例

<html>
<head>
<title>jQuery filter example</title>

<script type="text/javascript" src="jquery-1.3.2.min.js"></script>

</head>

<body>

<h1>jQuery filter example</h1>

<script type="text/javascript">

  $(document).ready(function(){

    $("#filterSelector").click(function () {

    $('div').css('background-color', 'white');

    $("div").filter("#div1").css('background-color', 'blue');

    });

    $("#filterFunction").click(function () {

    $('div').css('background-color', 'white');

    $('div').filter(function(index) {
        if(index==2 || index==3){//0 index based
            return true;
        }
    }).css('background-color', 'blue');

    });

    $("#filterFunction2").click(function () {

    $('div').css('background-color', 'white');

    $('div').filter(function(index) {
        return $("b", this).length == 1;
    }).css('background-color', 'blue');

    });

  });
</script>
</head><body>

<div id="div1">
    <b>This is div 1 with 'b' tag</b>
</div>
<div id="div2">
    This is div 2
</div>
<div id="div3">
    <b>This is div 3 with 'b' tag</b>
</div>
<div id="div4">
    This is div 4
</div>

<br/>
<br/>
<br/>

<input type='button' value='filter(selector)' id='filterSelector'>
<input type='button' value='filter(index)' id='filterFunction'>
<input type='button' value='filter(index)+b' id='filterFunction2'>
</body>
</html>

デモを試してください

jquery

jquery
トラバース

getdocs

13036