この方法では、任意の集合に対して複数の条件を OR で処理を行う事が想定されます。
- list item 1
- list item 2
- list item 3
- list item 4
- list item 5
- list item 6
.filter() この .filter 例は、最も良く使う方法としての、セレクタでの選択例です。.filter は、対象となる jQuery オブジェクト集合の中で、さらに選択範囲を狭くするという機能です。その機能に対応して、.end によって filter の範囲選択を解除して元の jQuery オブジェクト集合 に戻します。
<script src="//ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<script type="text/javascript">
$(function(){
$( "#listitems li" )
// **********************************
// まず偶数だけを対象にします
// **********************************
.filter( ":even" )
.css({
"background-color": "#123456",
"color": "#aaaaaa",
"padding": "10px",
"width": "300px"
})
// **********************************
// 一旦、フィルタを解除します
// **********************************
.end()
// **********************************
// 再度全体から奇数を対象にします
// **********************************
.filter( ":odd" )
.css({
"padding": "10px",
"width": "300px"
})
.text("OK")
// **********************************
// 一旦、フィルタを解除します
// **********************************
.end()
// **********************************
// 全てに対して、輪郭線と角丸を設定
// **********************************
.css({
"border": "solid 1px #c0c0c0",
"border-radius": "8px"
})
});
</script>
<ul id="listitems">
<li>list item 1</li>
<li>list item 2</li>
<li>list item 3</li>
<li>list item 4</li>
<li>list item 5</li>
<li>list item 6</li>
</ul>
jQuery のドキュメントでは、function を使用した例が多く掲載されています。function の中で条件を設定して、対象ならは true を return するように書かれています。これはすぐ理解できますが、DOM のリストと jQuery のオブジェクトを引数とした場合は少し解りづらいので以下のように具体例を作成しました。 elements とは、その意味の通りではありますが、ここでは配列として動作を確認しました。jQuery はそのままの意味で、セレクタで選択されたものが対象となりますが、セレクタを使うのであれば最初が filter の引数にすれば良いので、既に変数として存在するか、関数内で引数で渡されている事を想定すればいいと思います。
- list item 1
- list item 2
- list item 3
- list item 4
- list item 5
- list item 6
<script src="//ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<script type="text/javascript">
$(function(){
$( "#listitems2 li" )
// **********************************
// まず DOM で選択
// **********************************
.filter( [document.getElementById("d1"), document.getElementById("d2")] )
.css({
"background-color": "#123456",
"color": "#aaaaaa",
"padding": "10px",
"width": "300px"
})
// **********************************
// 一旦、フィルタを解除します
// **********************************
.end()
// **********************************
// 再度全体から jQuery で選択
// **********************************
.filter( $("[id*=j]") )
.css({
"padding": "10px",
"width": "300px"
})
.text("OK")
// **********************************
// 一旦、フィルタを解除します
// **********************************
.end()
// **********************************
// 全てに対して、輪郭線と角丸を設定
// **********************************
.css({
"border": "solid 1px #c0c0c0",
"border-radius": "8px"
})
});
</script>
<ul id="listitems2">
<li id="jquery1">list item 1</li>
<li id="d1">list item 2</li>
<li id="jquery2">list item 3</li>
<li id="jquery3">list item 4</li>
<li id="d2">list item 5</li>
<li id="jquery4">list item 6</li>
</ul>
タグ：jquery
※ エキスパートモードで表示しています
アーカイブとカテゴリページはこのように簡単に設定できますが、タグページは HTML 設定を直接変更して、以下の『タグページでのみ表示される内容』の記述方法で設定する必要があります
