SQLの窓

2014年02月27日


JavaScript DOMとjQuery : 同一階層(または下の階層)の要素を親経由で参照する

ブログシステム側で作成される HTML 要素には name や id が付いていないものもたくさんあり、class が付く事は良くありますが、何も無い要素もたくさんあります。

そのような要素はその要素の親から getElementsByTagName で取得するのが一般的です。child のつながりで取得すると、不要なテキストノードとかが混じって、ブラウザによって結果も違うからです。

class で取得する場合は、IE に関してだけバージョン制限があり、IE9 以上で getElementsByClassName が使用できます。

しかし、結局のところこういう IE の事情により jQuery を使う事が最も簡単な解決方法となります。

3) は目的の要素にクラスがあるので使用していますが、もし無ければ順序番号で参照する事になります。jQuery のままで順序番号を使用するには、4) のように .eq(n) を使います。ただ、この程度の参照であれば、5) のように jQuery から DOM に変更して .value プロパティを使うのもいいと思います。、
<script>
if ( !window.jQuery ) {
	if ( typeof window[window.location.hostname+'.loadjQuery'] === 'undefined' ) {
		if ( window.addEventListener ) {
			window[window.location.hostname+'.loadjQuery'] = '//ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js';
		}
		else {
			window[window.location.hostname+'.loadjQuery'] = '//ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js';
		}
	}
	document.write("<"+"script src='" + window[window.location.hostname+'.loadjQuery'] + "'></"+"script>");
}
</script>
<table>
<tr>
<td>
	<input
		class="message"
		type="text"
		name="jtext"
		value="こんにちは"
	>
	<br>
	1) <input
		type="button"
		value="getElementsByTagName"
		onClick='
			alert( this.parentNode.getElementsByTagName("input")[0].value );
		'
	>
	<br>
	2) <input
		type="button"
		value="getElementsByClassName"
		onClick='
			alert( this.parentNode.getElementsByClassName("message")[0].value );
		'
	>( IE は 9以上 ) 
	<br>
	3) <input
		type="button"
		value="jQuery parent and children 1"
		onClick='
			alert( $(this).parent().children(".message").val() )
		'
	>
	<br>
	4) <input
		type="button"
		value="jQuery parent and children 2"
		onClick='
			alert( $(this).parent().children().eq(0).val() )
		'
	>
	<br>
	5) <input
		type="button"
		value="jQuery parent and children 3"
		onClick='
			alert( $(this).parent().children()[0].value )
		'
	>
</td>
</tr>
</table>




1)
2) ( IE は 9以上 )
3)
4)
5)
この例では、name 属性で getElementsByName で取得できますが、name はページ内で複数存在する可能性も無いわけでは無いので、コードが見えている範囲だけで言えば、このほうが確実となります

関連する記事

JavaScript と jQuery : 位置関係から id の無い要素の参照を取得


タグ:javascript
【メソッド:jQueryの最新記事】
posted by lightbox at 2014-02-27 18:38 | メソッド:jQuery | このブログの読者になる | 更新情報をチェックする
バッチ処理

Microsoft Office
container 終わり

フリーフォントで簡単ロゴ作成
フリーフォントでボタン素材作成
フリーフォントで吹き出し画像作成
フリーフォントではんこ画像作成
ほぼ自由に利用できるフリーフォント
フリーフォントの書体見本とサンプル
画像を大きく見る為のウインドウを開くボタンの作成

Android SDK ポケットリファレンス
改訂版 Webデザイナーのための jQuery入門
今すぐ使えるかんたん ホームページ HTML&CSS入門
CSS ドロップシャドウの参考デモ
Google Hosted Libraries
cdnjs
BUTTONS (CSS でボタン)
イラストAC
ぱくたそ
写真素材 足成
フリーフォント一覧
utf8 文字ツール
右サイド 終わり
base 終わり