Umbrella - にほんご。

filter

更新日: 2018-02-09

.filter(filter)

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


パラメータ

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

戻り値

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"ボタンを押した時に5より大きい入力値の背景を ピンク色に変更します。

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" class="error">
</div>

関連項目

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

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



© 2014 Francisco Presencia Released under the MIT license

このコンテンツはFrancisco Presencia(franciscop)によるUmbrella JSドキュメントを翻訳/改変したものです。