Trabajando con elementos en jQuery: Hijos y atributos como selectores

Continúa la metodología para seleccionar de manera adecuada los elementos del documento, en este artículo explicamos como usar los hijos y atributos como selectores

Como pudimos leer en el artículo anterior el selector es una parte determinante para definir como actuará y operará jQuery sobre nuestro documento, debemos establecer que si un selector se encuentra mal definido el efecto obtenido, por obvias razones, puede no ser el esperado y con ello el resultado se verá claramente afectado. Es por ello que jQuery nos ha dado la facilidad de crear dichos selectores de la manera más sencilla posible, utilizando una sintaxis ya conocida, y adaptando el uso de extensiones un poco más avanzadas como las que veremos en este artículo.

Con el transcurso del tiempo jQuery pudo ir adaptando mejores formas de crear selectores un poco más avanzados y específicos, para ello hizo uso de las nuevas tecnologías que emergieron durante los años posteriores a su primer publicación. Gracias a esto, y aún basándose en CSS, fue que se dio la creación de una nueva serie de selectores entre los cuales se incluía la selección de los hijos directos de algunos de los elementos del documento DOM, la selección de elementos que se producen a través o después del llamado de otros elementos y la selección de elementos con atributos que coinciden con ciertas condiciones.

¿Para qué nos sirve esto? Bueno, supongamos que en alguna ocasión únicamente deseemos seleccionar los hijos directos de un determinado elemento, esto es muy común cuando trabajamos con listas, pero nos encontramos con el inconveniente de que la lista tiene en su interior otra sublista, tal como en el siguiente caso:

<ul class="miLista">
  <li><a href="http://www.google.com">Hijo 1</a>
    <ul>
      <li><a href="#">Nieto 1</a></li>
      <li><a href="#">Nieto 2</a></li>
      <li><a href="#">Nieto 3</a></li>     
    </ul>
  </li>
  <li>Hijo 2
    <ul>
      <li>Nieto 4</li>
    </ul>
  </li>
</ul>

Selectores con hijos

Como dijimos, solo queremos los hijos directos de la lista ya que la sublista no es útil para nuestra operación, por lo que debemos idear una forma de obtenerlos sin traernos la lista con el contenido de forma completa, basta con construir un buen selector.

Supongamos que queremos seleccionar el link que se encuentra anclado en el texto del “Hijo 1” de la lista, según las especificaciones de CSS y el uso básico de selectores, lo necesario para envolverlo sería incluir dentro de nuestra función jQuery la siguiente síntaxis “ul.miLista a”, sin embargo esto agarraría todos los otros enlaces que se encuentran contenidos en el mismo elemento que tiene relacionada la clase “miLista”.

Dándole un enfoque más avanzado a nuestra elaboración, usaremos los selectores de hijos, en los que separaremos al padre de sus hijos directos mediante el uso del signo “mayor que” o “corchete angular derecho” (>), de la siguiente manera:

li > a

Este ejemplo nos va a traer únicamente aquellos links que coincidan y sean hijos de un elemento “li”, en el caso de que agreguemos otra etiqueta en medio de los dos elementos, entonces la sentencia no nos regresará lo requerido. Por ejemplo si tenemos una etiqueta “span” después de la etiqueta “li” y antes de la etiqueta “a” el selector anteriormente definido no devolverá el elemento.

Si retomamos nuestro ejemplo inicial y buscamos obtener un selector que nos devuelva todos los links que se encuentran dentro de los hijos directos de la lista, debemos estructurarlo de la siguiente manera:

ul.miLista > li > a

Este selector logra abarcar dichos vínculos y los enlaces que figuran en las sublistas son excluidos, todo esto producido porque los elementos “ul” que actúan como padres de las sublistas, no tienen la clase “miLista” en sus atributos.

Selectores por atributo

Por otro lado, existen los selectores por atributo, los cuales pueden llegar a ser extremadamente poderosos si sabemos utilizarlos. Supongamos que deseamos añadir un comportamiento especial o realizar una operación únicamente sobre los enlaces que llevan a lugares fuera de nuestro sitio, podemos utilizar dichos selectores para estructurar dicha sentencia.

En nuestro código HTML del principio, vemos que contamos con enlaces internos y externos, la única diferencia entre ellos es que los enlaces que llevan a páginas externas tienen en su dirección el protocolo “http://”, dicha cadena se encuentra al principio del atributo “href” de nuestro enlace será la que nos permita seleccionar únicamente lo que requerimos.

Podemos seleccionar los enlaces cuyo valor de “href” comienza con “http://” de la siguiente manera:

a[href^=http://]

El carácter de intercalación (^) se utiliza para especificar que la coincidencia va a ocurrir al comienzo del valor especificado, en este caso de “href”. Para aquellos que estén acostumbrados a utilizar expresiones regular, les resultará fácil recordarlo puesto que muchas veces estás hacen uso de este mismo carácter para llevar acabo la misma función.

Existen otras maneras de utilizar los selectores de atributos para que coincida con un elemento que posee un atributo específico, independientemente de su valor, por ejemplo si utilizamos un selector como este:

input[type=text]

Obtendremos todos los campos de un formulario que sean de tipo texto, o si utilizamos algo como esto:

a[href$=.gif]
a[href*= google.com]

El primero nos devolverá todos los links que tienen como valor de enlace una imagen de tipo gif, ya que el signo ($) en este caso nos indica que quiere todos aquellos enlaces que terminan con la cadena de texto “.gif”. Mientras que el segundo nos regresará todos los links que contengan la cadena “google.com”.

Selectores de posesión

Más allá de los atributos, a veces es necesario obtener un elemento que contenga a otro, un ejemplo puede ser la lista que manejamos. Si suponemos que queremos aplicar una operación a los elementos de la lista que tienen vínculos, podemos utilizar el siguiente selector:

li:has(a)

Este selector equivale a todos los elementos “li” que contienen un elemento “a”. Con ello tenemos una nueva forma de poder obtener dichos elementos, sólo hay que tener en cuenta que sólo podemos anidar un nivel.