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 : 同一階層(または下の階層)の要素を親経由で参照する
タグ：javascript オブジェクト
|
|
【メソッド:jQueryの最新記事】
- jQuery の nextAll と prevAll で、テーブル行の任意のセルをクリックしてその行の全ての TD 内のデータを取得する
- jQuery で要素の作成や移動を行う、append、prepend、after、before で TABLE 要素内の行を扱うサンプル
- jQuery の .contents と .children の違い
- jQuery の .children で、直近の子要素のみを選択して処理する
- jQuery の .filter と .end で同じ集合に対して何度も色々な設定を行う
- jQuery で全て動的に PRE(親)要素の中にアンカー(リンク)を作成して行く処理 : $("<a></a>")
- jQuery の trigger メソッドは、一括で既存の jQuery イベントを呼び出し、その時追加のパラメータを渡す事ができます
- JavaScript DOMとjQuery : 同一階層(または下の階層)の要素を親経由で参照する
- jQuery の .val() と .val('値') と一括変更用の .val(関数)
- $.extend メソッドで jQuery の中に処理を書いて、その中で使ったデータをグローバルで使えるようにする
- jQuery のイベント名によるイベント登録の中身
- jQuery の each メソッドの『秘密の使い方』
- jQuery の .text('値') と .html() で HTMLエンティティに変換
- jQuery : animation メソッド
