jQuery API の context は、jQueryオブジェクトのDOMノードのコンテキストを返すプロパティ。
「jQuery Version 1.10」の時点で非推奨になった。
戻り値
- Element
DOM要素。
記述方法
jQuery( 要素 ) . context
「要素」にマッチした要素のコンテキストを取得する。
記述例
jQuery( document.getElementById( 'sample' ) ) . context
idが「sample」であるDOM要素のコンテキストを取得する。
jQuery( document.getElementById( 'sample' ) ) . context . nodeName
idが「sample」であるDOM要素のノード名を取得する。
jQuery( document.getElementById( 'sample' ) ) . context . rows . length
idが「sample」であるtable要素の行の数を取得する。
実装例（サンプル）
行の数：
列の数：
| 名前 | 算数 | 理科 | 国語 | 社会 | 英語 |
|---|---|---|---|---|---|
| 大翔 | 90 | 70 | 75 | 80 | 70 |
| さくら | 70 | 85 | 100 | 50 | 95 |
| 優斗 | 85 | 75 | 65 | 75 | 70 |
| 結衣 | 65 | 70 | 95 | 75 | 100 |
実装例（サンプル）のソースコード
JavaScript
<script type="text/javascript">
<!--
jQuery( function() {
var rowsLength = jQuery( document . getElementById( 'jquery-sample' ) ) . context . rows . length;
jQuery( '#jquery-sample-row' ) . text( rowsLength );
var columnLength = jQuery( document . getElementById( 'jquery-sample' ) ) . context . rows[0] . cells . length;
jQuery( '#jquery-sample-column' ) . text( columnLength );
} );
// -->
</script>
<!--
jQuery( function() {
var rowsLength = jQuery( document . getElementById( 'jquery-sample' ) ) . context . rows . length;
jQuery( '#jquery-sample-row' ) . text( rowsLength );
var columnLength = jQuery( document . getElementById( 'jquery-sample' ) ) . context . rows[0] . cells . length;
jQuery( '#jquery-sample-column' ) . text( columnLength );
} );
// -->
</script>
jQuery( document . getElementById( 'jquery-sample' ) ) . context . rows . length;
の部分を、
document . getElementById( 'jquery-sample' ) . rows . length;
としても同じ。
CSS
<style>
<!--
#jquery-sample {
width: 500px;
}
#jquery-sample,
#jquery-sample th,
#jquery-sample td {
border-collapse: collapse;
border: 1px #003030 solid;
}
#jquery-sample tr {
background-color: #bbffff;
height: 50px;
}
#jquery-sample th {
padding: 10px 20px;
background-color: #165240;
color: #ffffff;
font-size: 15px;
}
#jquery-sample td {
padding: 10px 20px;
font-size: 15px;
text-align: right;
vertical-align: bottom;
}
-->
</style>
<!--
#jquery-sample {
width: 500px;
}
#jquery-sample,
#jquery-sample th,
#jquery-sample td {
border-collapse: collapse;
border: 1px #003030 solid;
}
#jquery-sample tr {
background-color: #bbffff;
height: 50px;
}
#jquery-sample th {
padding: 10px 20px;
background-color: #165240;
color: #ffffff;
font-size: 15px;
}
#jquery-sample td {
padding: 10px 20px;
font-size: 15px;
text-align: right;
vertical-align: bottom;
}
-->
</style>
HTML
<p>行の数：<span id="jquery-sample-row"></span></p>
<p>列の数：<span id="jquery-sample-column"></span></p>
<table id="jquery-sample">
<tr>
<th>名前</th>
<th>算数</th>
<th>理科</th>
<th>国語</th>
<th>社会</th>
<th>英語</th>
</tr>
<tr>
<th>大翔</th>
<td>90</td>
<td>70</td>
<td>75</td>
<td>80</td>
<td>70</td>
</tr>
<tr>
<th>さくら</th>
<td>70</td>
<td>85</td>
<td>100</td>
<td>50</td>
<td>95</td>
</tr>
<tr>
<th>優斗</th>
<td>85</td>
<td>75</td>
<td>65</td>
<td>75</td>
<td>70</td>
</tr>
<tr>
<th>結衣</th>
<td>65</td>
<td>70</td>
<td>95</td>
<td>75</td>
<td>100</td>
</tr>
</table>
<p>列の数：<span id="jquery-sample-column"></span></p>
<table id="jquery-sample">
<tr>
<th>名前</th>
<th>算数</th>
<th>理科</th>
<th>国語</th>
<th>社会</th>
<th>英語</th>
</tr>
<tr>
<th>大翔</th>
<td>90</td>
<td>70</td>
<td>75</td>
<td>80</td>
<td>70</td>
</tr>
<tr>
<th>さくら</th>
<td>70</td>
<td>85</td>
<td>100</td>
<td>50</td>
<td>95</td>
</tr>
<tr>
<th>優斗</th>
<td>85</td>
<td>75</td>
<td>65</td>
<td>75</td>
<td>70</td>
</tr>
<tr>
<th>結衣</th>
<td>65</td>
<td>70</td>
<td>95</td>
<td>75</td>
<td>100</td>
</tr>
</table>