Curso de jQuery (4): Selectores, Tercera Parte

Selectores utilizados para encontrar un elemento

Estos selectores encuentran otros elementos que guardan relación con los elementos previamente seleccionados (como los que encuentran descendientes, antecesores o hermanos de una selección anterior, por ejemplo)

.next(), .nextAll(), .prev(), .prevAll()
Estos métodos son bastante sencillos. Por ejemplo, si quisiéramos seleccionar sólo el elemento único siguiente hermano de cada elemento previamente seleccionado, utilizaríamos .next().

Vamos a ver un ejemplo (tomado de la web oficial de jQuery):

  $(document).ready(function(){
    $("button[disabled]").next().text("Este botón está desactivado");
  });
  </script>
  <style>
  span { color:blue; font-weight:bold; }
  button { width:100px; }
  </style>
</head>
<body>
  <div><button disabled="disabled">Primero</button> - <span></span></div>
  <div><button>Segundo</button> - <span></span></div>
  <div><button disabled="disabled">Tercero</button> - <span></span></div>
</body>
</html>

Lo que hace es encontrar el hermano inmediatamente posterior de cada button con atributo disabled (el span) y cambiar su texto por “Este botón está desactivado”:

Si quisiéramos seleccionar todos los hermanos que siguen al elemento seleccionado utilizaríamos .nextAll(). Por ejemplo, localizar todos los divs que siguen al primero y aplicarles una clase que llamaremos “rojo” y que implica un borde rojo alrededor del DIV (fuente: web oficial de jQuery):

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" 
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<script type="text/javascript" src="http://code.jquery.com/jquery-latest.js"></script>
  <style>
  div { width: 80px; height: 80px; background: #abc; 
        border: 2px solid black; margin: 10px; float: left; }
  div.rojo { border-color: red; }
  </style> 
<script>
  $(document).ready(function(){
    $("div:first").nextAll().addClass("rojo");
  });
  </script>
</head>
<body>
  <div>Primer DIV</div>
  <div>DIV hermano<div>DIV hijo</div></div>
  <div>DIV hermano</div>
  <div>DIV hermano</div>
</body>
</html>

El resultado es:

selectores_nextall

Como vemos, en esta ocasión se ha cargado jQuery desde su web oficial. Esto nos permite (como vimos en la primera parte del curso) cargar siempre la última versión disponible. ¿Es esto recomendable? Depende, ya que hay veces que algún plugin o código que tengamos de jQuery en nuestra web no soporte la última versión de jQuery.

Sus contrarios son .prev() y .prevAll(), que nos sirven para seleccionar a los anteriores en vez de a los siguientes.

.parent(), .parents(), .children(), .siblings()
.parent() obtiene el padre directo de un elemento. Si la selección es de un grupo de elementos, obtiene un grupo de sus padres directos únicos.

Por ejemplo, supongamos el ejemplo anterior cuando veíamos los botones dentro de un Div. En este caso, seleccionaríamos el Div padre de cada botón y le aplicamos la clase rojo (que tendríamos definida en nuestra hoja de estilos como borde rojo) :

1	$("button").parent().addClass("rojo");

parent

.parents() obtiene un grupo de elementos que contienen los antecedentes únicos de el grupo de elementos previamente seleccionados (excepto el elemento raíz).

.children() Obtiene un grupo de elementos que contienen todos los hijos inmediatos únicos de cada grupo de elementos reviamente seleccionados. Mientras .parents() devuelve todos los antecesores, .children() sólo considera los elementos hijo inmediatos.

.siblings() obtiene un grupo de elementos que contienen todos los hermanos únicos del grupo de elementos seleccionados previamente.
Por ejemplo, supongamos que queremos aplicar un fondo blanco a todos los elementos hermanos de “p” que tengan la clase “nombredeclase”:

1	$("p").siblings(".nombredeclase").css("background", "white");

.contents()
Encuentra todos los nodos hijos de los elementos previamente seleccionados (incluyendo textos), o el contenido del documento si el elemento es un iframe.
Por ejemplo, si queremos seleccionar el texto que se encuentra en el interior de los elementos “p” (por ejemplo, para añadirle posteriormente más texto, etc..):

1	$("p").contents();

.add()
Añade más elementos -que cumplan con la selección que se encuentre dentro de los paréntesis de .add()- a la selección de elementos previamente seleccionados.

Por ejemplo, si habíamos seleccionado ya todos los elementos “p” de un documento y queremos añadir también los elementos “span”:

1	$("p").add("span")

.closest()
Este selector se ha introducido por primera vez con jQuery 1.3 Obtiene un grupo de elementos que contenga el elemento padre más cercano que cumpla con el selector especificado, incluyendo al elemento inicial. Comienza comprobando primero si el elemento actual cumple con la selección especificada. Si es así devuelve ese elemento. En caso contrario continúa buscando en el elemento, padre a padre, hasta que encuentra un elemento que cumpla la condición dada. Si no lo encuentra, no devuelve nada. Podéis ver un ejemplo muy interesante en la web oficial de jQuery.

.find()
Devuelve una nueva selección que contiene aquellos elementos descendientes de la selección previa que cumplen la condición dada dentro de los paréntesis de find(). Por ejemplo, si queremos seleccionar todos los span descendientes de elementos p haríamos:

1	$('p').find('span')

Encadenamientos

.not()
Es posible con jQuery seleccionar múltiples grupos de elementos y hacer múltiples cosas con ellos, todo en una única línea de código. Hemos visto que podemos partir de una selección inicial e ir reduciéndola o ampliándola. La nueva selección será la que estará activa para realizar sobre ella cualquier acción. Pero ¿qué pasa con la selección inicial? Podemos volver a ella en cualquier momento gracias al selector .end() Vamos a ver un ejemplo. Supongamos que tenemos:

1	$('div').add('a').css('background','black');

Hemos seleccionado todos los div del documento. Luego hemos creado un nuevo grupo que también contiene los elementos a. Cuando apliquemos el método css() lo haremos sobre el nuevo grupo creado. Pero ¿qué pasa si hacemos esto?:

1	$('div').add('a').css('background','black').end().css('color','red')

Después de aplicar el primer método .css() que crea un fondo negro hemos aplicado el método .end() devolviéndonos a la primera selección de los div sobre los que se aplicará el segundo método .css() que pone el color en rojo.

.andSelf()
Otro método útil para afectar las cadenas de jQuery es el método .andSelf(), que crea un nuevo grupo de elementos a partir de los dos últimos grupos de elementos seleccionados. Por ejemplo:

1	$('div').css('background,'black').children('img').css('border', '5px solid red').andSelf().css('padding','10px');

Hemos seleccionado todos los elementos div y les hemos dado un fondo negro. Después hemos seleccionado todos los elementos img hijos de los div anteriores y a estos les hemos aplicado un borde rojo de 5 píxeles. Y a continuación hemos unido las dos selecciones gracias a .andSelf() y les hemos aplicado a ambas un padding de 10px.

Accediendo directamente a los elementos del DOM: el método get()

Hay ocasiones en las que necesitamos acceder directamente a un elemento del DOM. Para estas ocasiones jQuery ofrece el método .get()

Por ejemplo, para seleccionar todos los elementos div:

1	$('div').get()

O para obtener el primer div( empezamos a contar desde cero):

1	$('div').get(0)

Hasta aquí hemos visto los selectores de jQuery. Ahora la pregunta es: Vale, ya tengo unos elementos de mi web seleccionados. Ahora ¿Qué puedo hacer con ellos? Hemos visto pequeños avances en métodos como .css() para aplicar estilos CSS de manera directa o .addClass() para añadir el nombre de una clase, pero queda mucho por ver.
¡Es en lo que entraremos en futuras entregas!

Mientras tanto, os recomiendo que utilicéis está página para practicar con selectores y ver los resultados que lo que escribimos en tiempo real.