HTML全体からjQueryオブジェクトを作成、find()とfilter()の違い
jQueryを使っていて予想と違っていたことがあったので検証した。使用したブラウザはFirefox32と33。
以下のようなhtmlのデータがある。表示のスクリーンショットはわかりやすいようにcssを付けてある。borderが破線になっているブロック要素はoptionクラスが付いている。
<!doctype html> <html> <head> <meta charset="UTF-8"> <title>HTML5 Sample</title> </head> <body> <header>h</header> <section>s1</section> <section class="option">s2</section> <section> s3 <div>s3_d1</div> <div class="option">s3_d2</div> </section> <section> s4 <div> s4_d1 <p>s4_d1_p1</p> <p class="option">s4_d1_p2</p> </div> </section> <section class="option">s5</section> <footer> f <div class="option">f_d1</div> </footer> </body> </html>
上記のhtmlデータからoptionクラスを持つ要素をfind()、filter() で抜き出すJavaScriptコードを含むHTMLファイルと初期表示のスクリーンショットを以下に示す。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>find() と filter() の動作比較</title>
<script type="text/javascript" src="./js/jquery-1.8.2.min.js"></script>
<script type="text/javascript">
$(function() {
$("input[type=button]").on("click", function() {
name = $(this).attr("name"); // "find"または"filter"
$("#funcName").text(name); // 何を実行するかの表示
$.get("./sample.html", function(responseBody) {
var $responseBody = $(responseBody);
var $result = $responseBody[name](".option"); // find()またはfilter()を実行
$("#top").after($result);
});
});
});
</script>
<style type="text/css">
#top { width: 250px; border-style: solid; border-width: 4px; border-color: #ffff00; margin: 0px; }
header, footer { width: 250px; border-style: solid; border-width: 4px; border-color: #ff00ff; margin: 0px; }
section { width: 250px; border-style: solid; border-width: 4px; border-color: #ff0000; margin: 0px; }
div { width: 200px; border-style: solid; border-width: 4px; border-color: #00ff00; margin: 0px; }
p { width: 150px; border-style: solid; border-width: 4px; border-color: #0000ff; margin: 0px; }
.option { border-style: dashed; border-width: 2px; }
</style>
</head>
<body>
<section id="top">
<form name="form" id="form" action="./get_html5.php" method="post">
<input type="button" name="find" value="find">
<input type="button" name="filter" value="filter">
<span id="funcName"></span>
</form>
</section>
</body>
</html>
ボタンを押すとAjaxで最初に示したHTMLデータを取得し、そのデータからjQueryオブジェクトを作成する。そして押したボタンに応じて find() または filter() でoptionクラス付きの要素を取得して表示している画面に追加する。
13行目で作成されたjQueryオブジェクト $responseBody の中身をfirebugsで見ると以下のようになっている。HTMLページ全体のデータからjQueryオブジェクトを作ると、head要素とbody要素の直下の要素が並んでいるのがわかる。head要素とbody要素は含まれていない。HTMLの構造そのままのjQueryオブジェクトが出来ると予想していたけど違った。なぜ head と body がないのかはよくわからないが、とりあえずそういうものだと思っておこう。
findボタン押下（find()実行）後、filterボタン押下（filter()実行）後、それぞれ以下のようになる。
上記の結果から、find() と filter() で選択されるoptionクラス付きの要素はbody要素の子要素をLV1とすると、
find() で選択されるのが
LV2:<div class="option">s3_d2</div> LV3:<p class="option">s4_d1_p2</p> LV2:<div class="option">f_d1</div>
filter で選択されるのが
LV1:<section class="option">s2</section> LV1:<section class="option">s5</section>
である。
以上より、find() と filter() の違いは以下になる。
- find()
-
jQueryオブジェクトの直下の要素の子孫要素から要素を選択する。直下の要素は対象外である。この記事の例では $responseBody の直下の要素である meta,title,header,section,footer は選択処理の対象外であり、それらの子孫要素が選択の対象となる。
つまり find() は直下より下の子孫要素すべてから指定した条件の要素を選択する。
呼び出し元のjQueryオブジェクトの集合から引数のセレクタに合うものだけを残し、合わないものはふるい落とす。名前の通りフィルタリングすると覚えるといい。
セレクタ１を要素セレクタ、セレクタ２をクラスセレクタまたは属性セレクタとすると
$(【セレクタ１】【セレクタ２】)
と
$(【セレクタ１】).filter(【セレクタ２】)
は同じになる。
参考ページ：
.find() | Qrefy - jQuery日本語リファレンス
.filter() | Qrefy - jQuery日本語リファレンス
jQuery の解釈するHTML 文字列 - do_akiの徒然想記
« 初めての成田空港 | Main | 逗子で釣り »
「JavaScript」カテゴリの記事
- JSONのオブジェクトは順序性を持たない(2015.05.08)
- HTML全体からjQueryオブジェクトを作成、find()とfilter()の違い(2014.10.19)
- jQueryのセレクタについてメモ(2014.10.10)
- 選択リストを拡張するSelect2(2014.09.28)
- JavaScriptの正規表現で前方一致（後読み）が使えない(2014.06.16)
TrackBack
Listed below are links to weblogs that reference HTML全体からjQueryオブジェクトを作成、find()とfilter()の違い:
« 初めての成田空港 | Main | 逗子で釣り »
Comments