¿Es mejor usar selectores de clase o selectores de atributos personalizados con jquery?

Question

He leído que es mejor seleccionar usando "id" que "clase" con jquery. Sin embargo, digamos que tengo varios divs en una página que debo seleccionar con jquery y realizar la misma manipulación. No puedo seleccionar con el atributo "id" porque nunca sería único. por ejemplo:

<div id="selectMeOnClick"> 
    ... 
</div> 
<div id="selectMeOnClick"> 
    ... 
</div> 
... many more divs ... 

que me deja (creo?) con 2 alternativas:

selectores Uso de clase

<div class="selectMeOnClick"> 
    ... 
</div> 

Uso atributo personalizado selectores

<div data-select="selectMeOnClick"> 
    ... 
</div> 

Mi pregunta es: ¿Estas son realmente las 2 alternativas restantes? ¿Y cuál es la solución más eficiente?

Gracias

Answer 1

Yo usaría los selectores de clase. Utilizando selectores de atributos personalizados serían:

1. HTML no válida. HTML solo permite que ciertos atributos con nombre estén presentes en ciertos tipos de elementos.
2. Más lento. Si bien jQuery puede usar el .getElementsByClassName nativo en su primer fragmento, no puede hacerlo en el segundo. Esto podría llevar a una desaceleración en los navegadores modernos.

Answer 2

La ID es la más rápida en JavaScript. Porque solo hay un elemento seguro (si su código es válido). La clase y el attr personalizado van a tener la misma velocidad, creo.

No me gusta usar atributos personalizados porque no es válido y hace el DOM bastante desordenado. Prefiero usar .data() para almacenar datos que son relativos al elemento seleccionado.

Answer 3

Sí, es mejor usar "id" que "clase" con jquery. Pero no solo con jquery. Este es un enfoque general.

En su situación, tiene que proporcionar más información. Si desea seleccionar varios divs con la misma clase, pueden ser todos secundarios de otro div, e.t.c. Y puedes obtenerlos como un hijo de algún div que puedes obtener con tu id.

Debe crear dicha estructura DOM a la que pueda acceder mediante elementos de identificación o lógicamente mediante algunas propiedades.

Además, si desea cambiar algún atributo css en la clase css exacta, no es la peor idea obtener div's por clase.

También las selecciones de atributos personalizados no son buenas. No es válido

Answer 4

Para una selección simple como esta actuación no será un problema.pero si su div's se encuentran dentro de un recipiente con una identificación, por ejemplo

<div id="Main"> 
    <div class="selectMeOnClick"> 
     ... 
    </div> 
    <div class="selectMeOnClick"> 
     ... 
    </div> 
</div> 

actualización: según gdoron comentario

Entonces el selector rápido habría $('#Main selectMeonClick')

Answer 5

Yo personalmente uso tanto en función de La ocasión. Si, por ejemplo, una fila en la tabla representa algunos datos que deseo tener, pero no mostrarlos necesariamente, uso atributos personalizados. A veces es tan agradable escribir cosas como esta:

$("input[action=do-something]").click(function() { ... }); 

y no tener que perder el tiempo con las clases de elementos. Me doy cuenta de que es un poco más lento, pero teniendo en cuenta que solo ocurre una vez que se carga la página, puedo vivir con eso.