ブログシステム側で作成される 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の最新記事】
- 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 と jQuery : 位置関係から id の無い要素の参照を取得
- jQuery の .val() と .val('値') と一括変更用の .val(関数)
- $.extend メソッドで jQuery の中に処理を書いて、その中で使ったデータをグローバルで使えるようにする
- jQuery のイベント名によるイベント登録の中身
- jQuery の each メソッドの『秘密の使い方』
- jQuery の .text('値') と .html() で HTMLエンティティに変換
- jQuery : animation メソッド
