Consejos para hacer referencia a elementos DOM que trabajan con jQuery

Question

Necesita algunos consejos sobre cómo hacer referencia a elementos con jQuery (DOM / Recorrido / Selectores). A veces es suficiente para establecer una identificación en el elemento deseado y hacer esto:

$('#elementID').hide();

Pero a veces simplemente no se puede usar, por ejemplo, cuando se trabaja con una lista de n elementos, he visto a algunas personas adjuntar una clase a cada elemento de la lista como:

<a class="selectMe" href="http://jquery.com/">jQuery1</a>
<a class="selectMe" href="http://jquery.com/">jQuery2</a>
<a class="selectMe" href="http://jquery.com/">jQuery2</a>

Y luego haz esto con jQuery:

$('.selectMe').hide();

Algunos hacen lo mismo pero con el atributo rel, etc.

Algunas otras personas hacen esto tan genérico que da miedo, si este es el escenario:

<div id="MyID">
<span>Some Text Here</span><a href="http://jquery.com/">jQuery1</a>
</div>

Si quiero adjuntar un evento al ancla:

$('#MyID a').show();

Como asumir que solo habrá 1 enlace dentro de ese DIV.

Lo que ustedes piensan que realmente depende totalmente del escenario o hay algunas buenas prácticas para hacer esto.

Answer 1

Busque las construcciones más rápidas. La identificación es la más rápida. Obtenga el contexto más pequeño rápidamente: incluso puede usar una ID en un DIV y luego seleccionar desde allí; evite la búsqueda completa de DOM cuando sea posible.

Por ejemplo, será más rápido buscar en un elemento con una clase que solo una clase.

Algo de esto NO es intuitivo. Mire algunos de los ejemplos en StackOverflow para tener una idea de lo que funciona.

Por ejemplo:

<div id='mydiv'>
<a class="selectMe" href="http://jquery.com/">jQuery1</a>
<a class="selectMe" href="http://jquery.com/">jQuery2</a>
<a class="selectMe" href="http://jquery.com/">jQuery2</a>
</div>

luego haga la selección: (Editado por notas)

$('#mydiv').children('a.selectMe').hide();

Esto solo busca dentro de ese contexto los enlaces.

Editar por notas:

Hay algunas preferencias para la sintaxis de selección, como:

 $('#mydiv').children('a.selectMe').hide();
 $('#mydiv > a.selectMe').hide();

Se necesita algo de investigación por mi parte ya que la documentación para jQuery es un poco ambigua aquí: " padre > niño regresa: matriz Coincide con todos los elementos secundarios especificados por " child " de elementos especificados por " parent " ;. " y " children (expr) Devuelve: jQuery Obtenga un conjunto de elementos que contenga todos los elementos secundarios inmediatos únicos de cada uno de los elementos coincidentes. "

La pregunta que debe aclararse en MI mente es si el primer formulario devuelve TODOS los hijos / nietos o solo los hijos inmediatos, como el segundo formulario indica que es cierto. Uno de estos es el "selector". form y el otro bajo '' atravesando '', que para mí son tareas funcionales similares pero no exactamente lo mismo.

Answer 2

Diría que depende de la situación, pero como dijo Mark Schultheiss, ayuda a comprender cómo jQuery ejecuta sus selectores para obtener los elementos.

Seleccionar por className sin dar ningún contexto va a ser lento en IE ya que no admite getElementsByClassName . Vea este artículo http://ejohn.org/blog/getelementsbyclassname-speed-comparison/. Ayuda a anteponer el nombre del elemento (como div.className ) o limitar la búsqueda a un ámbito más pequeño como este - $ ('. Class', '#myDiv')

Lo mismo ocurre con los selectores de atributos. El abuso de atributos de rel es peor que el abuso de atributos de class ya que no hay una función nativa de búsqueda por atributos en ningún navegador.