filter

.filter(filter)

条件にマッチした要素を保持し、 それ以外の要素は除外します。

.filter('a')
.filter(u('a'))
.filter(function(node, i){ return u(node).is('a'); })

パラメータ

filter: 下記参照

• string : 保持する要素のCSSセレクタ。
• instance : 保持する要素を持ったUmbrellaインスタンス。
  (このインスタンスと、.filter()の対象のインスタンスの共通要素は保持します)
• function : booleanを返す関数。保持する場合はtrueを返す必要があります。
  この関数はnodeとindexをパラメータとして受け取ります。 また、thisはUmbrellaのインスタンスなので、 this.slice()のように他の関数を利用することができます。

戻り値

u

フィルタを通ったノードを持つUmbrellaのインスタンスを返します。

例

.activeなリンクだけを取得します。

var links = u('a').filter('.active');

全ての段落(p)のリンクを取得します。

var paragraphs = u('p').filter(function(node){
  return u(node).find('a').length > 0;
});

答えが5以上の入力要素を取得し、エラーを表示します。

u('input').filter(function(node, i){
  if (parseInt(u(node).first().value) > 5) {
    return true;
  }
}).addClass('error');

デモ

"PUSH"ボタンを押した時に3より大きい入力値の背景を ピンク色に変更します。

JavaScript

u('button').on('click', function(){
  u('#demo input').filter(function(node, i){
    if (parseInt(u(node).first().value) > 3) {
      return true;
    }
  }).addClass('error');
});

CSS

.error {
  background-color: #FCE4EC;
}

HTML

<button type="button">PUSH</button>
<div id="demo">
  <input type="text" value="1">
  <input type="text" value="2">
  <input type="text" value="3">
  <input type="text" value="4">
</div>

関連項目

.is() 要素が指定した条件に合致するかを確認します。

.not() マッチした要素を除外します。