この方法では、任意の集合に対して複数の条件を 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
|
|
【メソッド:jQueryの最新記事】
- jQuery の nextAll と prevAll で、テーブル行の任意のセルをクリックしてその行の全ての TD 内のデータを取得する
- jQuery で要素の作成や移動を行う、append、prepend、after、before で TABLE 要素内の行を扱うサンプル
- jQuery の .contents と .children の違い
- jQuery の .children で、直近の子要素のみを選択して処理する
- jQuery で全て動的に PRE(親)要素の中にアンカー(リンク)を作成して行く処理 : $("<a></a>")
- jQuery の trigger メソッドは、一括で既存の jQuery イベントを呼び出し、その時追加のパラメータを渡す事ができます
- JavaScript と jQuery : 位置関係から id の無い要素の参照を取得
- JavaScript DOMとjQuery : 同一階層(または下の階層)の要素を親経由で参照する
- jQuery の .val() と .val('値') と一括変更用の .val(関数)
- $.extend メソッドで jQuery の中に処理を書いて、その中で使ったデータをグローバルで使えるようにする
- jQuery のイベント名によるイベント登録の中身
- jQuery の each メソッドの『秘密の使い方』
- jQuery の .text('値') と .html() で HTMLエンティティに変換
- jQuery : animation メソッド
