jQuery逆引きリファレンス
配列から特定の条件で要素を取り出すには？（$.grep）
$.grepメソッドを使って、配列から条件に合致した要素だけを取り出す方法を解説。Internet Explorer 8以前の環境ではJavaScriptのfilterメソッドをこれで代替しよう。
配列から条件に合致した要素だけを取り出すには、$.grepメソッドを利用します。標準のJavaScriptにも同等のメソッドとしてfilterがありますが、Internet Explorerではバージョン9以降での動作が前提です。Internet Explorer 8以前の環境を想定しなければならない状況がまだまだあることを考えると、現時点では、$.grepメソッドを利用するのが無難でしょう。
$.grepメソッドの基本
まずは、基本的な例を見ていきます。以下は、オブジェクト配列（メンバーリスト）を読み取り、age（年齢）プロパティが30より大きいメンバーだけを取り出します。
|
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title>jQuery TIPS</title>
</head>
<body>
<script src="http://code.jquery.com/jquery-1.11.1.min.js"></script>
<script>
$(function() {
// 処理対象のオブジェクト配列
var members = [
{ name: '山田理央', age: 17, sex: 'female' },
{ name: '鈴木真琴', age: 24, sex: 'male' },
{ name: '佐藤健一', age: 45, sex: 'male' },
{ name: '木下奈美', age: 29, sex: 'female' },
{ name: '天童赤根', age: 35, sex: 'female' }
];
// 配列membersの内容を順に走査
var filtered = $.grep(members,
function(elem, index) {
// ageプロパティの値でフィルター
return (elem.age > 30);
}
);
console.log(filtered); // フィルター後の結果
});
</script>
</body>
</html>
|
IEのF12開発者ツールや、Chromeのデベロッパーツールなどで、［コンソール］／［Console］タブを開いた状態で、上記のgrep.htmlページを閲覧すると、そのタブ内にこのようなログ情報が表示される。
コールバック関数の条件は、以下の通りです。
- 引数として要素値（
elem）とインデックス番号（index）を受け取る - 戻り値が
trueの場合、現在の要素を結果配列に残す
コールバック関数の戻り値がfalseのもの――ここではageプロパティが30以下の要素は除外されていることが確認できます。
条件を逆転する
$.grepメソッドの第3引数にtrueを指定した場合、$.grepメソッドはコールバック関数がfalseを返した要素だけを結果配列に残します。
|
var filtered = $.grep(members,
function(elem, index) {
return (elem.age > 30);
}, true
);
|
例えば否定の条件式は人間にとって分かりにくいものです。そのような場合には、第3引数をtrueにすることで条件を反転し、コードを見やすくできます。
API：jQuery.grep() カテゴリ：Utilities（ユーティリティ）
※以下では、本稿の前後を合わせて5回分（第11回～第15回）のみ表示しています。
連載の全タイトルを参照するには、［この記事の連載 INDEX］を参照してください。
11. 配列の内容を順番に処理するには？（$.each）
$.eachメソッドを使って、配列やオブジェクトの内容を順に処理する方法を解説。またJavaScriptのevery／someメソッドを、jQueryの$.eachで代替する方法も説明する。
12. 配列の内容を順番に加工するには？（$.map）
$.mapメソッドを使って、配列やオブジェクトの内容を順に加工する方法を解説。Internet Explorer 8以前の環境ではJavaScriptのmapメソッドをこれで代替しよう。
13. 【現在、表示中】≫ 配列から特定の条件で要素を取り出すには？（$.grep）
$.grepメソッドを使って、配列から条件に合致した要素だけを取り出す方法を解説。Internet Explorer 8以前の環境ではJavaScriptのfilterメソッドをこれで代替しよう。
14. 配列の内容を検索するには？（$.inArray）
$.inArrayメソッドを使って、配列から特定の要素を検索する方法を解説。Internet Explorer 8以前の環境ではJavaScriptのindexOfメソッドをこれで代替しよう。
