Seleção contextual com jQuery

Para fazer uma seleção com uso de jQuery podemos usar um segundo argumento opcional chamado de contexto. O argumento opcional contexto destina-se a limitar a busca a um nó específico do DOM. Uma busca limitada a um contexto é muito útil quando trata-se de uma árvore do DOM muito extensa e estamos interessados em encontrar, por exemplo, todos os elementos a localizados em uma parte específica do DOM. Existem vários artigos na web ensinando que você deve fazer uma busca contextual sempre que desejar aumentar a performance da busca. E, realmente é verdade que seleção contextual poderá aumentar a performence de uma busca, contudo a maioria daqueles artigos interpretam equivocadamente o uso de tal seleção.

Definindo o contexto

A partir da versão 1.3, inclusive, da jQuery o contexto é considerado como uma propriedade jQuery. Observe a seguir uma demonstração do que é contexto.

$('a').context; // => document

Se você executar o código mostrado irá receber como resposta document. De fato o contexto padrão para todas as coleções de objetos jQuery é o documento carregado. Ou seja, por padrão, seleção jQuery é feita em todo o documento.

Alterando o contexto

Para funcionar como esperado é necessário que o contexto seja um nó do DOM. Este conceito é que tem sido mal interpretado na maioria dos artigos relacionados encontrados na web. Eu também, no passado, interpretei equivocadamente este conceito. Vários exemplos disponíveis na web ensinam que basta passar um segundo argumento para o seletor de modo a que se execute uma busca contextual. Embora aparentemente certo, isto não é suficiente e nestes casos a busca continuará sendo em todo o documento.

Observe a seguir um exemplo mostrando a simples passagem de um segundo argumento para atuar como contexto. Executando o código do exemplo você verá que o contexto continua sendo o documento.

$('a', '#myContainer').context; // => document

Quando jQuery encontra um segundo seletor para o contexto tudo se passa como se a seleção fosse conforme a seguir.

$('#myContainer').find('a');

Isto é verdade também quando o contexto é uma coleção de objetos jQuery.

Vejamos a seguir como alterar o contexto da busca para uma coleção jQuery.

// armazena o nó para o contexto  
var context = $('#myContainer')[0];    
// passa context como segundo argumento  
$('a', context).context; // => <div id="myContainer">

Executando este exemplo fica demonstrado que ao passarmos um nó como segundo argumento o contexto é alterado.

jQuery 1.3.3 e o método live()

Nas versões 1.3.x da jQuery o método live() atrela eventos ao documento. Na próxima versão 1.3.3 com uso o método live() será possível atrelar eventos a um contexto para uma coleção jQuery. Isto significa que o método live() para eventos será mais específico e potencialmente mais rápido.

Créditos:
Author: Brandon Aaron
URL do artigo original: http://brandonaaron.net/blog/2009/06/24/understanding-the-context-in-jquery