jQuery API の jQuery . grep( array, function( elementOfArray, indexInArray ) [, invert] ) は、arrayに指定した配列を、function( elementOfArray, indexInArray )に指定した関数でフィルタリングする。invertにfalseを指定した場合、フィルタリング条件を満たす値を格納した配列を返す。invertにtrueを指定した場合、フィルタリング条件を満たさない値を格納した配列を返す。
引数
- array
フィルタリングしたい配列。
- function( elementOfArray, indexInArray )
フィルタリング条件を指定する関数。
- elementOfArray
配列の項目要素。
- indexInArray
配列内のインデックス。
- invert
trueを指定した場合、フィルタリング条件を反転させる。
戻り値
- Array
配列。
invertにfalseを指定した場合、フィルタリング条件を満たす値を格納した配列を返す。
invertにtrueを指定した場合、フィルタリング条件を満たさない値を格納した配列を返す。
記述例
array = jQuery . grep( [ 0, 1, 2 ], function( elementOfArray, indexInArray ){
return elementOfArray > 0;
} );
return elementOfArray > 0;
} );
arrayには、[ 1, 2 ]が格納される。
array = jQuery . grep( [ 0, 1, 2 ], function( elementOfArray, indexInArray ){
return elementOfArray > 0;
}, true );
return elementOfArray > 0;
}, true );
arrayには、[ 0 ]が格納される。
実装例（サンプル）
の点数が 点 の生徒のデータを
実装例（サンプル）の動作について
条件を指定して、「抽出」ボタンをクリックすると、条件に合う生徒の名前と点数を表示する。
実装例（サンプル）のソースコード
JavaScript
<script type="text/javascript">
<!--
var scoreList = [
{ name: '太郎', Mathematics: 98, Science: 98, English: 66 },
{ name: '花子', Mathematics: 52, Science: 65, English: 100 },
{ name: '一郎', Mathematics: 75, Science: 77, English: 90 },
{ name: 'さくら', Mathematics: 64, Science: 79, English: 96 }
];
jQuery( function() {
jQuery( '#jquery-sample-button' ) . click( function () {
jQuery( '#jquery-sample-ul' ) . text( '' );
var subject = jQuery( '#jquery-sample-subject' ) . val();
var score = jQuery( '#jquery-sample-score' ) . val();
var invert = jQuery( '#jquery-sample-invert' ) . val();
extract = jQuery . grep( scoreList, function( elementOfArray, indexInArray ){
return eval( 'elementOfArray . ' + subject ) >= score;
}, eval( invert ) );
jQuery . each( extract, function( key, value ){
jQuery("#jquery-sample-ul") . append( '<li>' + value . name + ":" + eval( 'value . ' + subject ) + '点</li>' );
} );
} ) . click();
} );
// -->
</script>
<!--
var scoreList = [
{ name: '太郎', Mathematics: 98, Science: 98, English: 66 },
{ name: '花子', Mathematics: 52, Science: 65, English: 100 },
{ name: '一郎', Mathematics: 75, Science: 77, English: 90 },
{ name: 'さくら', Mathematics: 64, Science: 79, English: 96 }
];
jQuery( function() {
jQuery( '#jquery-sample-button' ) . click( function () {
jQuery( '#jquery-sample-ul' ) . text( '' );
var subject = jQuery( '#jquery-sample-subject' ) . val();
var score = jQuery( '#jquery-sample-score' ) . val();
var invert = jQuery( '#jquery-sample-invert' ) . val();
extract = jQuery . grep( scoreList, function( elementOfArray, indexInArray ){
return eval( 'elementOfArray . ' + subject ) >= score;
}, eval( invert ) );
jQuery . each( extract, function( key, value ){
jQuery("#jquery-sample-ul") . append( '<li>' + value . name + ":" + eval( 'value . ' + subject ) + '点</li>' );
} );
} ) . click();
} );
// -->
</script>
CSS
<style>
<!--
#jquery-sample-filter {
margin: 10px;
padding: 10px;
background-color: #f0f0f0;
border: 1px solid gray;
border-radius: 10px;
}
#jquery-sample-subject,
#jquery-sample-score,
#jquery-sample-invert {
margin: 5px;
}
#jquery-sample-ul {
margin: 10px 10px 10px 50px;
color: #333333;
list-style-type: square;
}
-->
</style>
<!--
#jquery-sample-filter {
margin: 10px;
padding: 10px;
background-color: #f0f0f0;
border: 1px solid gray;
border-radius: 10px;
}
#jquery-sample-subject,
#jquery-sample-score,
#jquery-sample-invert {
margin: 5px;
}
#jquery-sample-ul {
margin: 10px 10px 10px 50px;
color: #333333;
list-style-type: square;
}
-->
</style>
HTML
<div id="jquery-sample">
<p id="jquery-sample-filter">
<select id="jquery-sample-subject">
<option value="Mathematics" selected>数学</option>
<option value="Science">科学</option>
<option value="English">英語</option>
</select>
の点数が
<input type="text" id="jquery-sample-score" value="70" size="10">
点
<select id="jquery-sample-invert">
<option value="false" selected>以上</option>
<option value="true">未満</option>
</select>
の生徒のデータを
<button id="jquery-sample-button">抽出</button>
</p>
<ul id="jquery-sample-ul">
</ul>
</div>
<p id="jquery-sample-filter">
<select id="jquery-sample-subject">
<option value="Mathematics" selected>数学</option>
<option value="Science">科学</option>
<option value="English">英語</option>
</select>
の点数が
<input type="text" id="jquery-sample-score" value="70" size="10">
点
<select id="jquery-sample-invert">
<option value="false" selected>以上</option>
<option value="true">未満</option>
</select>
の生徒のデータを
<button id="jquery-sample-button">抽出</button>
</p>
<ul id="jquery-sample-ul">
</ul>
</div>