Selectores en jQuery: buscar y recorrer elementos del DOM

Gran parte del trabajo con jQuery comienza seleccionando uno o más elementos del DOM.

Selector por ID

$("#titulo")

Selecciona el elemento cuyo atributo id sea titulo.

Selector por clase

$(".tarjeta")

Selecciona todos los elementos que tengan la clase tarjeta.

Selector por etiqueta

$("p")

Selecciona todos los párrafos de la página.

jQuery usa selectores CSS

Podemos combinar selectores del mismo modo que en CSS:

$("main .tarjeta")
$("ul > li")
$("input[type='email']")

first(), last() y eq()

Cuando una selección devuelve varios elementos podemos quedarnos con uno en particular.

$("li").first();
$("li").last();
$("li").eq(2);

eq(2) obtiene el tercer elemento porque el índice comienza en 0.

find()

find() busca descendientes dentro de una selección existente.

const panel = $(".panel");

panel.find("button");

parent() y children()

parent() sube al padre directo. children() obtiene los hijos directos.

$(".item").parent();
$(".lista").children();

closest()

closest() busca hacia arriba el ancestro más cercano que coincida con un selector. Es muy útil en eventos.

$(this).closest(".tarjeta");

filter()

filter() reduce una selección existente y conserva sólo los elementos que coinciden con una condición o selector.

$("li").filter(".activo");

length

La propiedad length indica cuántos elementos contiene una selección.

const cantidad = $(".tarjeta").length;

console.log(cantidad);

Ejercicio

Creá una lista con cinco elementos. Seleccioná el primero, el último y todos los que tengan una clase determinada.

Errores comunes

• olvidar # para IDs o . para clases;
• suponer que una selección siempre contiene un solo elemento;
• confundir find() con filter();
• olvidar que eq() usa índices desde 0.

---

¿Te sirvió esta guía? ☕

Si este contenido te ayudó a aprender jQuery, podés apoyar a Club Programador. Cada aporte ayuda a mantener el sitio online y a seguir publicando material gratuito.

🇦🇷 Apoyar desde Argentina

☕ Invitame un café con Mercado Pago

🌎 Apoyar desde otro país

☕ Apoyar con PayPal

Seguí aprendiendo jQuery

← Introducción a jQuery: qué es, para qué sirve y cómo agregarlo a una página

Modificar HTML, texto, atributos y clases con jQuery →