追加で要素をさらに絞り込む filter()メソッド

filter()はすでにセレクターで絞った要素に対して、
さらに別の条件での絞り込みができるjQueryの命令です。

絞り込みの条件は、括弧内にjQueryのセレクターの記法で指定します。

たとえば以下のようにするとdiv要素すべての色を赤にし、さらにその中から
“pickup”というid属性を持つ要素のみ、背景を黄色にします。

$("div").css("color", "red").filter("#pickup").css("background", "yellow");

1	$("div").css("color", "red").filter("#pickup").css("background", "yellow");

<title>基本フィルタ</title>



$(function(){
    $('p:parent').css("background", "white").filter(".new").prepend("<font color="red">(new)</font>");
});



<h3>japan</h3>
<div id="first">
<p>zack japan</p>
<p class="new">kamo japan</p>
<p>torushie japan</p>
</div>
<h3></h3>
<div id="second">
<p>favorit fruit</p>
<p>favorit color</p>
<p></p>
<ul>
    <li>1. banana 69</li>
    <li>2. apple 148</li>
</ul>
</div>

<title>基本フィルタ</title>

$(function(){

$('p:parent').css("background", "white").filter(".new").prepend("<font color="red">(new)</font>");

});

<h3>japan</h3>

<p>zack japan</p>

<p class="new">kamo japan</p>

<p>torushie japan</p>

</div>

<p>favorit fruit</p>

<p>favorit color</p>

<p></p>

<ul>

<li>1. banana 69</li>

<li>2. apple 148</li>

</ul>

</div>

上記サンプルでは以下のように、$(‘p:parent’)が子要素をもつpタグを意味し、
それに対してcss(“background”, “white”)で背景を白に設定しています。
さらに filter(“.new”) と続けることで、子要素を持つpタグの中から、class属性
に”new”を持つものだけを選択し、その選択されたタグの先頭に”(new)”赤文字の
文字列を追加します。

$('p:parent').css("background", "white").filter(".new").prepend("<font color="red">(new)</font>");

1	$('p:parent').css("background", "white").filter(".new").prepend("<font color="red">(new)</font>");