Cómo encontrar un elemento con atributo de datos en jQuery

Para seleccionar un elemento HTML por un atributo data-*, use un selector de atributos CSS con .find() o .filter() de jQuery, o pase el selector directamente a jQuery. Elija según si el objetivo está por debajo de su selección actual o es el propio elemento seleccionado.

Buscar un atributo de datos con el método .find() de jQuery

El método .find() de jQuery busca en los descendientes de los elementos de la colección jQuery actual. Por ejemplo, $("ul").find("[data-name='Edison']") selecciona el elemento de la lista con data-name="Edison" dentro de una lista. Puede encadenar una acción como .css("font-size", "3em") para cambiar el tamaño de fuente del elemento coincidente.

Este método no comprueba el propio ul; busca en los elementos que están por debajo de él. Use un selector que coincida con el valor del atributo y luego aplique la acción al elemento devuelto. Si el selector no devuelve ningún elemento, compruebe la ortografía del atributo y confirme que el objetivo está anidado debajo del ul seleccionado.

Buscar un atributo de datos con un selector de atributos CSS

Un selector de atributos CSS tiene la forma [attribute="value"]. Para seleccionar un elemento de lista con data-iso="MRT" dentro de una lista, use $("ul [data-iso='MRT']"). El espacio entre ul y el corchete significa «un descendiente coincidente de un ul». El elemento seleccionado es el elemento de lista de Mauritania, por lo que una llamada encadenada como .css("color", "magenta") aplica estilo a ese elemento.

Cuando el atributo pertenece al propio ul, use un selector compuesto sin espacio: $("ul[data-viruses='computer-viruses']"). Ese selector coincide con la propia lista; añadir un espacio pediría en su lugar un descendiente con el atributo. Sustituya data-iso y MRT por el nombre y el valor del atributo en su marcado, manteniendo los corchetes y las comillas alrededor del valor. El selector compara el valor del atributo tal como está escrito; no busca en el texto de un elemento ni en una propiedad de JavaScript separada. Use el valor exacto presente en el HTML.

Este pequeño modelo de datos de JavaScript utiliza los mismos nombres de países y valores de atributos que el ejemplo del selector. Muestra qué elemento coincide con el valor de data-iso.

const countries = [
  { name: "Mauritania", "data-iso": "MRT" },
  { name: "Luxembourg", "data-iso": "LUX" },
  { name: "Croatia", "data-iso": "HRV" }
];

const match = countries.filter((country) => country["data-iso"] === "MRT")[0];
console.log(match.name);

Mauritania

El modelo de datos ilustra la comparación de valores; no ejecuta un navegador ni jQuery. Los patrones de selectores jQuery anteriores son ejemplos de sintaxis del lado del navegador.

Buscar un atributo de datos con el método .filter()

Use .filter() de jQuery para reducir una colección existente a los elementos que coinciden con un selector. Por ejemplo, $("li").filter('[data-esolang="Chef"]') selecciona el elemento de lista de Chef del conjunto actual de elementos de lista. Encadene .addClass("style-chef") para añadir una clase a esa coincidencia.

La distinción es la colección inicial: .find() busca debajo de sus elementos, mientras que .filter() comprueba los elementos que ya están en su colección. Para un objetivo que puede ser un descendiente o el propio elemento padre, inspeccione dónde aparece el atributo data-* en el marcado y elija el selector en consecuencia.