js STUDIO

.filter()

セレクターや条件関数を指定して、マッチしている要素をフィルタリングします。

.filter( selector ) 1.0追加

戻り値:jQuery

引数 説明
selector フィルタリングをセレクタで指定します。

.filter( function(index) ) 1.0追加

戻り値:jQuery

引数 説明
function(index) マッチしている各要素に対して関数を実行し、戻り値がtrueであれば残し、falseであれば除外します。 関数内で各要素はthisで参照可能です。

.filter( element ) 1.4追加

戻り値:jQuery

引数 説明
element フィルタリングをDOM要素で指定します。

.filter( jQuery object ) 1.4追加

戻り値:jQuery

引数 説明
jQuery object フィルタリングをjQueryオブジェクトで指定します。

サンプル

例えば、次のような処理を実行するとインデックス番号が偶数のLI要素の背景が赤くなります。 

  $('li').filter(':even').css('background-color', 'red');

関数を使用した例です。下記のようなコードがあった場合、

<ul>
  <li><strong>リスト</strong> 項目1 - 1つのSTRONG要素</li>
  <li><strong>リスト</strong> 項目 <strong>2</strong> - 2つの <span>STRONG要素</span></li>
  <li>リスト 項目 3</li>
  <li>リスト 項目 4</li>
  <li>リスト 項目 5</li>
  <li>リスト 項目 6</li>
</ul>

次の処理を実行すると、リスト項目1のは池のみが赤くなります。

$('li').filter(function(index) {
  return $('strong', this).length == 1;
}).css('background-color', 'red');

また、関数に指定されてるindexはマッチした要素のインデックス番号になります。

デモ

全てのDIV要素の背景色を変更した後、middleクラスを持つ要素に絞り込んで赤いボーダーで囲っています。 

<!DOCTYPE html>
<html>
<head>
<style>
div { width:60px; height:60px; margin:5px; float:left;
      border:2px white solid;}
</style>
<script src="http://code.jquery.com/jquery-latest.js">
</script>
</head>
<body>
<div></div>
<div class="middle"></div>
<div class="middle"></div>
<div class="middle"></div>
<div class="middle"></div>
<div></div>
<script>
  $("div").css("background", "#c8ebcc")
          .filter(".middle")
          .css("border-color", "red");
</script>
</body>
</html>

DIV要素選択して背景を変更した後、フィルタリングに関数を指定してインデックス番号が1もしくはIDが"forth"の要素を 取り出してボーダーは赤の二重線で囲っています。 

<!DOCTYPE html>
<html>
<head>
<style>
  div { width:60px; height:60px; margin:5px; float:left;
      border:3px white solid; }
</style>
<script src="http://code.jquery.com/jquery-latest.js"></script>
</head>
<body>
  <div id="first"></div>
  <div id="second"></div>
  <div id="third"></div>
  <div id="fourth"></div>
  <div id="fifth"></div>
  <div id="sixth"></div>
<script>
  $("div").css("background", "#b4b0da")
          .filter(function (index) {
                return index == 1 || $(this).attr("id") == "fourth";
              })
          .css("border", "3px double red");
</script>
</body>
</html>

 Back to top

© 2010 - 2017 STUDIO KINGDOM