My Photo

« 初めての成田空港 | Main | 逗子で釣り »

October 19, 2014

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>

Response_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>

Test_find_filter_0

ボタンを押すとAjaxで最初に示したHTMLデータを取得し、そのデータからjQueryオブジェクトを作成する。そして押したボタンに応じて find() または filter() でoptionクラス付きの要素を取得して表示している画面に追加する。
13行目で作成されたjQueryオブジェクト $responseBody の中身をfirebugsで見ると以下のようになっている。HTMLページ全体のデータからjQueryオブジェクトを作ると、head要素とbody要素の直下の要素が並んでいるのがわかる。head要素とbody要素は含まれていない。HTMLの構造そのままのjQueryオブジェクトが出来ると予想していたけど違った。なぜ head と body がないのかはよくわからないが、とりあえずそういうものだと思っておこう。

Watch_responsebody

findボタン押下(find()実行)後、filterボタン押下(filter()実行)後、それぞれ以下のようになる。

Test_find_filter_1
Test_find_filter_2

上記の結果から、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() は直下より下の子孫要素すべてから指定した条件の要素を選択する。
filter()
直下の要素から選択する。それらの子孫は対象外である。この記事の例では $responseBody の meta,title,header,section,footer が選択処理の対象となる。
呼び出し元のjQueryオブジェクトの集合から引数のセレクタに合うものだけを残し、合わないものはふるい落とす。名前の通りフィルタリングすると覚えるといい。
セレクタ1を要素セレクタ、セレクタ2をクラスセレクタまたは属性セレクタとすると
$(【セレクタ1】【セレクタ2】)

$(【セレクタ1】).filter(【セレクタ2】)
は同じになる。

参考ページ:
.find() | Qrefy - jQuery日本語リファレンス
.filter() | Qrefy - jQuery日本語リファレンス
jQuery の解釈するHTML 文字列 - do_akiの徒然想記

« 初めての成田空港 | Main | 逗子で釣り »

JavaScript」カテゴリの記事

Comments

Post a comment

(Not displayed with comment.)

TrackBack

TrackBack URL for this entry:
http://app.cocolog-nifty.com/t/trackback/26461/60511483

Listed below are links to weblogs that reference HTML全体からjQueryオブジェクトを作成、find()とfilter()の違い:

« 初めての成田空港 | Main | 逗子で釣り »

May 2017
Sun Mon Tue Wed Thu Fri Sat
  1 2 3 4 5 6
7 8 9 10 11 12 13
14 15 16 17 18 19 20
21 22 23 24 25 26 27
28 29 30 31      
無料ブログはココログ

日本blog村

  • にほんブログ村 IT技術ブログへ
  • にほんブログ村 アニメブログへ
  • にほんブログ村 サッカーブログ アルビレックス新潟へ

好きな音楽家

メモ

XI-Prof