SQLの窓

2014年03月25日


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

SELECT 要素の後に、ボタンがあるとして、ボタンから SELECT要素を参照するのに、両方の要素を DIV で囲みます。

id を付けてしまえば簡単ですが、いくつも埋め込む前提ですと面倒です。このユニットで閉じてしまえる参照のほうが場合によっては便利です。

とりあえず、jQuery でも同じ機能を実装してみましたが、parent と children のメソッドでいずれもセレクタが使用できます。ただ、parent は特殊で、ここでは this の parent は一つしかありませんが、最初の jQuery オブジェクトが複数の場合、それぞれの親の中から選択するのが parent( "セレクタ" ) のようです。
<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>

<div>
   <select>
      <option value="http://winofsql.jp/download/WinOfSql102.zip">SQLの窓 Build C++</option>
      <option value="http://winofsql.jp/download/hanbaib.zip">簡易販売管理用DBデータ</option>
   </select> 
   <input type=button value="JavaScriptのみで取得" onclick='
         var a = this.parentNode;
         alert( a.getElementsByTagName("select")[0].value );
      '
   >
   <input type=button value="jQueryで取得" onclick='
         var a = $(this).parent().children("select").eq(0)
         alert( a.val() );
      '
   >
</div>



関連する記事

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


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

Microsoft Office
container 終わり

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

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