2013-03 / 2013-03-28

前のエントリ: 開いたファイルの文字コードが誤ってる場合の修正 [emacs]
次のエントリ: 高さ100%指定しても画面フルのブロック要素にならない [jQueryMobile]

親要素・子要素の取得
2013-03-28-1 / カテゴリ: [html][JavaScript][jQueryMobile] / [permlink]

jQueryで取得した要素の親要素・子要素を参照するには

<!DOCTYPE html>
<html lang="ja">
  <head>
	<meta charset="UTF-8"/>
	<meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1, maximum-scale=1"/>
	<title>template</title>
	<link rel="stylesheet" href="http://code.jquery.com/mobile/1.2.0/jquery.mobile-1.2.0.min.css" />
	<script src="http://code.jquery.com/jquery-1.8.2.min.js"></script>
	<script src="http://code.jquery.com/mobile/1.2.0/jquery.mobile-1.2.0.min.js"></script>
  </head>
  
  <body>
	<div data-role="page" id="home">
	  <div data-role="header">
		<h1>はろー</h1>
	  </div>
  
	  <div data-role="content">
		Hello, jQuery Mobile.
		<div class="root">
		  root
		  <div class="parent">
			parent
			<div class="me">
			  me
			  <div class="child">
				child
				<div class="grandchild">
				  grandchild
				</div>
			  </div>
			  <div class="child2">
				child2
			  </div>
			</div>
		  </div>
		</div>
		<script src="elem.js"></script>
	  </div>
	  <div data-role="footer">
	  </div>
	</div>
  </body>
</html>
こんなhtmlがあるとして、まず
    var me = $('.me');
    console.log("me>> " + me.text());
でmeが取得できる(出力は me \n child \n grandchild \n child2)。

親要素の取得

meからparentを取得するには
    var parent = me.parent();
    console.log("parent>> " + parent.text());
parent()で取得できる。
parent()の引数に'.parent'とか条件を入れてもOKだけど親は一つしかないから意味ないかな？
(出力は parent \n me \n child \n grandchild \n child2)

親の親を取得するには
    var root_p = me.parent('.root');
    console.log("root(parent)>> " + root_p.text());
じゃダメ。取れない

    var root_ps = me.parents('.root');
    console.log("root(parents)>> " + root_ps.text());
parent()でなくparents()でいける。

子要素の取得

me から子要素を取得するには
    var child = me.children();
    console.log("child>> " + child.text());
とやると、全ての子要素が取得される(出力は child \n grandchild \n child)。

子要素を識別するセレクタを指定して
    var child1 = me.children('.child');
    console.log("child1>> " + child1.text());
とやればclass="child"の子要素が取得できる(child \n grandchild)。

    var child2 = me.children('.child2');
    console.log("child2>> " + child2.text());
これならchild2側の子要素(出力は child2)

孫要素を取得するには
    var grandchild_c = me.children('.grandchild');
    console.log("grandchild(children)>> " + grandchild_c.text());
じゃやっぱり取れない

    var grandchild_f = me.find('.grandchild');
    console.log("grandchild(find)>> " + grandchild_f.text());
探せばOK

一応 findelem.js 全体

$('#home').live('pagecreate',function() {
	func();
});

function func() {
	console.log("func() begin");
	var me = $('.me');
	console.log("me>> " + me.text());

	// 子要素
	var child = me.children();
	console.log("child>> " + child.text());
	var child1 = me.children('.child');
	console.log("child1>> " + child1.text());
	var child2 = me.children('.child2');
	console.log("child2>> " + child2.text());

	var grandchild_c = me.children('.grandchild');
	console.log("grandchild(children)>> " + grandchild_c.text());
	// 孫は取れない

	var grandchild_f = me.find('.grandchild');
	console.log("grandchild(find)>> " + grandchild_f.text());

	// 親要素
	var parent = me.parent('.parent');
	console.log("parent>> " + parent.text());

	var root_p = me.parent('.root');
	console.log("root(parent)>> " + root_p.text());
	// 親の親は取れない

	var root_ps = me.parents('.root');
	console.log("root(parents)>> " + root_ps.text());
}


ちなみにclassセレクターはパフォーマンス的にはあまりよくないらしいので、実際にはidセレクターを使うのがベスト、とのこと。
[ コメント ]
前のエントリ: 開いたファイルの文字コードが誤ってる場合の修正 [emacs]
次のエントリ: 高さ100%指定しても画面フルのブロック要素にならない [jQueryMobile]

2013 : 01 02 03 04 05 06 07 08 09 10 11 12
2012 : 01 02 03 04 05 06 07 08 09 10 11 12
2011 : 01 02 03 04 05 06 07 08 09 10 11 12
2010 : 01 02 03 04 05 06 07 08 09 10 11 12
2009 : 01 02 03 04 05 06 07 08 09 10 11 12
2008 : 01 02 03 04 05 06 07 08 09 10 11 12
2007 : 01 02 03 04 05 06 07 08 09 10 11 12
2006 : 01 02 03 04 05 06 07 08 09 10 11 12
2005 : 01 02 03 04 05 06 07 08 09 10 11 12
2004 : 01 02 03 04 05 06 07 08 09 10 11 12

最終更新時間: 2013-05-02 16:12