ブログシステム側で作成される 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
※ エキスパートモードで表示しています
アーカイブとカテゴリページはこのように簡単に設定できますが、タグページは HTML 設定を直接変更して、以下の『タグページでのみ表示される内容』の記述方法で設定する必要があります
