javascript - una - Combinando un selector de clases y un selector de atributos con jQuery

selector etiqueta jquery

Question

¿Es posible combinar un selector de clases y un selector de atributos con jQuery?

Por ejemplo, dado el siguiente HTML:

<TABLE>
  <TR class="myclass" reference="12345"><TD>Row 1</TD></TR>
  <TR class="otherclass" reference="12345"><TD>Row 2</TD></TR>
  <TR class="myclass" reference="12345"><TD>Row 3</TD></TR>
  <TR class="myclass" reference="54321"><TD>Row 4</TD></TR>
</TABLE>

¿Cuál sería el selector que puedo usar para seleccionar solo las filas 1 y 3?

Yo he tratado:

$(".myclass [reference=12345]") // returns nothing

$(".myclass, [reference=12345]") // returns all 4 rows (yes, I know the comma means ''or'')

Estoy seguro de que la respuesta es muy simple y he intentado buscar en los foros y documentación de jQuery pero parece que no puedo resolver esto. ¿Alguien puede ayudar?

Answer 1

Combínalos. Literalmente combinarlos ; adjúntelos sin ningún tipo de puntuación.

$(''.myclass[reference="12345"]'')

Su primer selector busca elementos con el valor del atributo, contenido en elementos con la clase.
El espacio se interpreta como el selector descendente .

Su segundo selector, como usted dijo, busca elementos con el valor del atributo, o la clase, o ambos.
La coma se interpreta como el operador de selector múltiple , sea lo que sea lo que signifique (los selectores de CSS no tienen una noción de "operadores"; la coma se conoce con más precisión como un delimitador).

Answer 2

Creo que solo necesitas quitar el espacio. es decir

$(".myclass[reference=12345]").css(''border'', ''#000 solid 1px'');

Aquí hay un violín http://jsfiddle.net/xXEHY/

Answer 3

Este código también funciona:

$("input[reference=12345].myclass").css(''border'', ''#000 solid 1px'');

Answer 4

Esto también funcionará:

$(".myclass[reference=''12345'']").css(''border'', ''#000 solid 1px'');