明滅するプログラマの思索

WEBエンジニアとして勤務している一介の男が、日々気づいたことをまとめるブログです

jQuery における context の役割

jQuery には context という名のプロパティ、オプションがあります。
今回はこれの役割についてまとめてみます。

context とは

日本語にすると「文脈」とか「前後関係」なんて訳されます。
jQuery の中では、「関連付け」というような意味の役割を持っています。

.context

$() などで生成された jQuery オブジェクトが、範囲対象として保持している DOM ノードを参照します。

$('#hoge').context.nodeName;

上記のコードでは、$('#hoge') の検索範囲対象は HTMLDocument 全体なので、#document を参照しています。

$(セレクタ, context)

$() を利用して jQuery オブジェクトを生成する際、通常、セレクタは HTMLDocument 全体から検索されますが、2番目の引数( context )に「セレクタの参照範囲」を渡すことで、検索範囲を絞ることができます。
context には DOM エレメント、Document、jQuery オブジェクトを渡すことができます。
デフォルトは HTMLDocument 全体なので、セレクタは HTMLDocument 全体から検索されます。

$('#hoge', document.getElementsByTagName('div')[0])

上記のコードでは、DOM エレメントをたどって1つ目の <div> 要素内から #hoge を検索します。

$('#hoge', document.getElementsByTagName('div')[0]).context.nodeName;

上記のコードでは、$('#hoge') の検索範囲を document.getElementsByTagName('div')[0] に絞り込んでいます。そのため、context として保持されているのは DIV となります。

context のパフォーマンス

検索範囲を絞ることで、jQuery のパフォーマンスを上げることができます。
しかし $(.., context) に渡す context は、セレクタを渡しても速度向上につながりません。

$('#hoge', '#fuga').context.nodeName;
// 上記では範囲対象は #document のままとなります

context にはノードを渡すことで、関連付けが有効となります。

var fuga = $('#fuga')[0];
$('#hoge', fuga).context.nodeName;
// ノードを渡すことで範囲対象は DIV となります

$.ajax({.., context: xxx})

context には、$.ajax() のコールバック関数に任意の値を関連付けるための役割もあります。
$.ajax() のコールバック関数は、その外側にあるパラメータは参照できません。
そこで context オプションを使います。
context オプションで渡された値は、コールバック関数内で this として関連付けられ、参照することができます。

var a = 'hoge';
$.ajax({
  url:'hoge.html',
  type:'GET',
  context: a,
}).done(function(data, textStatus, jqXHR){
  // contextで指定した値が this に関連付けられる
  alert( this );// hoge と表示される
});

複数のパラメータを渡す場合はオブジェクトにすればOKです。

var a = 'hoge';
var b = 'fuga';
$.ajax({
  url:'hoge.html',
  type:'GET',
  context: {a;a, b:b},
}).done(function(data, textStatus, jqXHR){
  // contextで指定した値が this に関連付けられる
  alert( this.b );// fuga と表示される
});