.filter()による高度なフィルタリング
.filter()メソッドの機能を最大限に活用し、関数でカスタムロジックを適用して、動的なプロパティや関係に基づいて要素を選択する方法を学びます。
「.filter()による高度なフィルタリング」はCoddyKit上の無料jQuery Academyレッスンです。 これはレッスン2/3です。 下記で完全なレッスンを無料で読むことができます。その後、ブラウザ内の組み込みコードエディタと24時間対応のAIチューターでハンズオン演習できます。 これはjQuery Academy学習パスの一部であり、ウェブとCoddyKitアプリ全体で進捗が同期されます。 jQuery Academyコースには全3レッスンが含まれています。
.filter()で選択結果を絞り込む
jQueryの.filter()メソッドは、選択済みの要素集合を絞り込むための強力な方法です。特定の条件に一致する要素だけを残せます。
最初の選択の後に適用する第2段階の選択と考えると、より正確に要素を選べます。
セレクターを使った基本的な絞り込み
.filter()を使う最も簡単な方法は、CSSセレクター文字列を指定することです。通常のセレクターと同じように機能しますが、現在のjQueryの集合に含まれる要素だけに適用されます。
すべてのdiv要素の中からクラス.itemを持つものを選び、さらにクラス.activeも持つものだけを残してみましょう。
<!DOCTYPE html>
<html>
<head>
<title>Filter by Selector</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
</head>
<body>
<div class="item">Item 1</div>
<div class="item active">Item 2</div>
<div class="item">Item 3</div>
<div class="item active">Item 4</div>
<script>
$(document).ready(function(){
// Select all divs with class 'item'
var allItems = $('div.item');
// Then filter to keep only those with class 'active'
var activeItems = allItems.filter('.active');
activeItems.css('color', 'blue');
});
</script>
</body>
</html>関数によるカスタムロジック
.filter()の真価は、引数として関数を渡したときに発揮されます。これにより、選択した各要素に対して、非常に柔軟で動的なロジックを適用できます。
- 関数は、現在のjQueryの集合に含まれる各要素に対して実行されます。
index（集合内での要素の位置）とelement（元のDOM要素）の2つの引数を受け取ります。- 要素を残す場合は
trueを返し、絞り込んだ集合から除外する場合はfalseを返します。
インデックス位置による絞り込み
フィルター関数のindex引数を使うと、現在のjQueryの集合内での位置に基づいて要素を選択できます。2つおきの要素や特定の範囲を選ぶ場合などに便利です。
リスト項目のうち、0から数えて偶数インデックスにあるものをすべて選択し、強調表示してみましょう。
<!DOCTYPE html>
<html>
<head>
<title>Filter by Index</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
</head>
<body>
<ul>
<li>Item 0</li>
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
<li>Item 4</li>
<li>Item 5</li>
</ul>
<script>
$(document).ready(function(){
$('li').filter(function(index) {
// Keep items at even indices (0, 2, 4...)
return index % 2 === 0;
}).css('background-color', 'lightgreen');
});
</script>
</body>
</html>属性とプロパティに基づく絞り込み
element引数（または関数内の$(this)）を使うと、各DOM要素のプロパティ、属性、テキスト内容を調べられます。これにより、非常に細かい条件で絞り込めます。
ここでは、テキストに「Important」という単語を含むすべてのリスト項目を見つけ、太字にします。
<!DOCTYPE html>
<html>
<head>
<title>Filter by Property</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
</head>
<body>
<ul>
<li>Task 1</li>
<li>Important Task 2</li>
<li>Task 3</li>
<li>Another Important Task 4</li>
</ul>
<script>
$(document).ready(function(){
$('li').filter(function() {
// Check if the text content includes "Important"
return $(this).text().includes('Important');
}).css('font-weight', 'bold');
});
</script>
</body>
</html>データによる動的な絞り込み
HTML5のdata属性（例: data-status="active"）は、要素にアプリケーション固有の追加情報を直接保存するのに適しています。.filter()を使って、これらのカスタムデータの値に基づいて要素を選択できます。
data-status属性を使い、'complete'としてマークされたリスト項目を強調表示してみましょう。
<!DOCTYPE html>
<html>
<head>
<title>Filter by Data</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
</head>
<body>
<ul>
<li data-status="pending">Task A</li>
<li data-status="complete">Task B</li>
<li data-status="pending">Task C</li>
<li data-status="complete">Task D</li>
</ul>
<script>
$(document).ready(function(){
$('li').filter(function() {
// Check the 'data-status' attribute
return $(this).data('status') === 'complete';
}).css('text-decoration', 'line-through');
});
</script>
</body>
</html>子要素または親要素による絞り込み
フィルター関数では、要素同士の関係も調べられます。たとえば、特定の子要素を含む親要素を選択したり、その逆を行ったりできます。
ここでは、内部に<img>タグを含むリスト項目を見つけ、枠線を追加します。
<!DOCTYPE html>
<html>
<head>
<title>Filter by Relationship</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
</head>
<body>
<ul>
<li>Text only</li>
<li>Item with <img src="https://placehold.co/16x16" alt="icon"></li>
<li>Another text item</li>
<li>Item with another <img src="https://placehold.co/16x16" alt="image"></li>
</ul>
<script>
$(document).ready(function(){
$('li').filter(function() {
// Check if the current <li> contains an <img>
return $(this).find('img').length > 0;
}).css('border', '2px solid orange');
});
</script>
</body>
</html>ロジックを使った複雑な絞り込み
フィルター関数内では、&&（AND）や||（OR）など、標準のJavaScript論理演算子を使って複数の条件を組み合わせられます。
これにより、複数の条件に基づいて非常に正確に選択でき、絞り込みを強力に行えます。
- 表示されているか。AND 特定のクラスを持っているか。
- テキスト「X」を含んでいるか。OR データ属性「Y」を持っているか。
実践的な動的絞り込み
ここまで学んだ内容を組み合わせてみましょう。複数の条件に基づいて商品リストを絞り込む場面を想像してください。フィルター関数では、複数の条件を動的に確認できます。
この例では、フィルター関数内でロジックを組み合わせ、表示されていて、かつ「electronics」カテゴリに属する商品を強調表示します。
<!DOCTYPE html>
<html>
<head>
<title>Dynamic Filtering</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
<style>
.hidden { display: none; }
</style>
</head>
<body>
<div class="product" data-category="electronics">Laptop</div>
<div class="product hidden" data-category="books">Novel</div>
<div class="product" data-category="electronics">Mouse</div>
<div class="product" data-category="books">Textbook</div>
<script>
$(document).ready(function(){
$('div.product').filter(function() {
// Filter products that are visible AND in 'electronics' category
var isVisible = $(this).is(':visible');
var isElectronics = $(this).data('category') === 'electronics';
return isVisible && isElectronics;
}).css('background-color', 'lightblue');
});
</script>
</body>
</html>絞り込みの課題
次のHTML <li class="item special" data-value="10">...</li>があるとします。クラス.specialを持ち、かつdata-valueが5より大きい<li>要素だけを正しく選択する.filter()関数はどれですか。
復習: 動的な絞り込みの力
これで、jQueryの.filter()メソッドの高度な使い方を習得しました。
- 既存の選択結果を絞り込み、要素を正確に制御できます。
- 関数を使うことで、動的で複雑な絞り込みロジックを利用できます。
- インデックス、要素のプロパティ、データ属性、要素同士の関係を調べられます。
&&（AND）や||（OR）を使って複数の条件を組み合わせ、非常に具体的な条件を指定できます。
この強力なメソッドにより、反応性が高く、データ駆動型のユーザーインターフェースを作成できます。
よくある質問
「.filter()による高度なフィルタリング」レッスンは無料ですか？
はい。「.filter()による高度なフィルタリング」の完全なテキストはこのウェブで無料で読めます。インタラクティブに演習し（組み込みコードエディタと24時間対応のAIチューター）、jQuery Academyコースの残りをアンロックするには、CoddyKit PROにアップグレードしてください。 jQuery Academyコースには全3レッスンが含まれています。
「.filter()による高度なフィルタリング」で何を学びますか？
.filter()メソッドの機能を最大限に活用し、関数でカスタムロジックを適用して、動的なプロパティや関係に基づいて要素を選択する方法を学びます。 ブラウザで直接実行するハンズオンコードでjQuery Academyを演習し、24時間対応のAIチューターがレッスンを進める中での質問に答えます。
jQuery Academyを始めるのに経験は必要ですか？
事前経験は必要ありません。CoddyKitのjQuery Academyは初級者から上級者向けに構成されているため、ここから始めるか最初から始めて、自分のペースで進むことができます。 これはレッスン2/3です。
「.filter()による高度なフィルタリング」レッスンにはどのくらい時間がかかりますか？
ほとんどのCoddyKitレッスンは約5～10分かかります。各レッスンはコンパクトでインタラクティブなので、着実に進歩し、ウェブとアプリ全体で正確に前回の場所から再開できます。
このjQuery Academyレッスンでコードを書いて実行できますか？
はい。すべてのjQuery Academyレッスンに組み込みコードエディタが含まれているため、ブラウザでリアルコードを書いて実行し、即座のAIフィードバックを取得できます。ローカル設定は不要です。
このコースのすべてのレッスン
- カスタム疑似セレクターの構築
- .filter()による高度なフィルタリング
- .not()による要素の除外