Knowledge center Programación Entornos de programación

Combinación de selectores en jQuery

Autor: Daniel Ibáñez del Campo

Combinaciones básicas

Los tres tipos de selectores vistos hasta ahora nos permiten hacer selecciones con diferentes tipos de precisión:

  • extremadamente específicas (selector por identificador)
  • algo específicas (selector por clase)
  • muy poco específicas (selector por elemento)

A su vez, los selectores pueden combinarse entre ellos para conseguir así mayor precisión a la hora de definir los elementos del DOM que seleccionarán.

Aunque no existe una obligación implícita en el orden de combinar selectores, aplicaremos, por convenio, la siguiente ordenación:

  1. Selector por tipo de elemento
  2. Selector por identificador
  3. Selector por clase
  4. Selector por atributo
  5. Filtrados

Así, un selector "completo" sería div#identificador.clase[atrributo]:filtro() . Este ejemplo es un poco "exagerado", pero sirve para hacernos una idea de la estructura de éstos.

Combinación de selector de tipo de elemento y de selector de clase

Selector $("li.social_item")
Código de ejemplo
 <script type="text/javascript">
$(document).ready(
function(){
  //mostrar por consola los elementos que componen la seleccion
  console.log( $("li.social_item") );

});
</script>
Resultado de la selección

Con este selector conseguiremos obtener únicamente los elementos li del documento que dispongan de la clase social_item. De este modo, se excluirán de la selección los elementos que no sean li, así como los li que no tengan asignada la clase.

Combinación de selector por identificador y de selector de clase

Selector $("#site_title.destacado")
Código de ejemplo
 <script type="text/javascript">
$(document).ready(
function(){
  //mostrar por consola los elementos que componen la seleccion
  console.log( $("#site_title.destacado") );

});
</script>
Resultado de la selección

La combinación del selector por identificador con el selector de clase nos permitirá filtrar un elemento por su identificador siempre y cuando tenga asignada la clase indicada. Así, si el elemento con el identificador indicado no posee la clase, no será incluido como resultado de la selección.

Combinación de varios selectores de clase

Selector $(".impar.final")
Código de ejemplo
 <script type="text/javascript">
$(document).ready(
function(){
  //mostrar por consola los elementos que componen la seleccion
  console.log( $(".impar.final") );

});
</script>
Resultado de la selección

Otro método de combinación es el uso de varios selectores de clase. De este modo, limitaremos la selección a elementos que tengan asignadas todas las clases indicadas.

 

Combinar selectores

Selectores múltiples - $("selector1, selector2, selectorN")

Los selectores múltiples no son, propiamente dicho, un tipo diferente de selectores, sino más bien un método para obtener como resultado de la selección los elementos obtenidos por cada uno de los selectores indicados en la combinación.

Para construir un selector múltiple indicaremos tantos selectores como deseemos en una misma cadena separándolos por el carácter ",". El único requisito de los selectores indicados es que se encuentren correctamente definidos.

Analicemos un selector múltiple muy básico:

 $("div, p, span")

El selector anterior devolverá, como resultado de la selección, los elementos que cumplan con tres selectores separados por comas: Los elementos de tipo "div", los de tipo "p" y los de tipo "span" del DOM. Este selector  es un ejemplo muy símple de uso de selectores múltiples. Sin embargo, la complejidad del selector múltiple podrá ser mucho mayor, dependiendo de los selectores que lo compongan.

Veamos un ejemplo de uso de selector múltiple frente al siguiente fragmento de HTML:

 <table>
 <tr class="impar principal"></tr>
 <tr class="par"></tr>
 <tr class="impar"></tr>
 <tr class="par"></tr>
 <tr class="impar final"></tr>
 <tr class="par final"></tr>
</table>

Vamos a utilizar el selector $("tr.principal, tr.final")

Selector $("tr.principal, tr.final")
Código de ejemplo
 <script type="text/javascript">
$(document).ready(
function(){
  //mostrar por consola los elementos que componen la seleccion
  console.log( $("tr.principal, tr.final") );

});
</script>
Resultado de la selección

Como resultado de lanzar este comando, jQuery devolverá una selección en la que se combinarán los elementos de los dos selectores que forman la selección múltiple:

  • El primer selector (tr.principal) seleccionará los elementos de tipo tr con la clase principal asignada
  • El segundo selector (tr.final) seleccionará los elementos de tipo tr con la clase final asignada

El resultado, mostrado en la consola del navegador, incluirá dos elementos: el primer tr de la tabla, que tenía asignada la clase principal, y el último, ya que tiene asignada la clase final.

Selectores Jerárquicos

En ocasiones, es necesario acceder a ciertos elementos en relación al contexto en el que se encuentran o que tienen un relación con otros elementos del DOM. Los elementos del DOM son interpretados en forma de árbol, estableciendo una relación jerárquica entre ellos como elementos padre e hijos.

Con los selectores jerárquicos podremos definir condiciones que examinarán esta estructura, indicando la posición que deberán tener los elelementos a seleccionar con relación a otros elementos del DOM.

Selector Hijo $("div > table")

El Selector Hijo (o Child Selector) nos permitirá definir una selección que obtendrá como resultado los elementos que cumplan con el fragmento del selector situado a la derecha del símbolo ">" y cuyo elemento padre directo en el DOM cumpla, en su caso, con el fragmento del selector situado a la izquierda del símbolo anteriormente mencionado.

 

Selector Hijo I

Veamos un ejemplo sobre este fragmento de código HTML.

 <div id="todo">
  <div class="parte" id="hijo1">
    <table id="tabla1"><tr><td></td></tr></table>
  </div>
  <div class="parte" id="hijo2">
    <div id="subhijo1">
      <table id="tabla2"><tr><td></td></tr></table>
    </div>
  </div>
  <div class="parte" id="hijo3">
    <span id="subhijo2">
      <table id="tabla3"><tr><td></td></tr></table>
    </span>
  </div>
</div>

Supongamos que en este fragmento aplicamos el selector $("div > table").

Selector $("div > table")
Código de ejemplo
 <script type="text/javascript">
$(document).ready(
function(){
  //mostrar por consola los elementos que componen la seleccion
  console.log( $("div > table") );

});
</script>
Resultado de la selección

Este selector solamente devolverá el conjunto con los elementos de tipo table cuyo padre directo sea un elemento div.

La selección resultante contendrá dos elementos: la tabla #tabla1 que se encuentra dentro del div #hijo1 y la tabla #tabla2 que se encuentra dentro del div #subhijo1.

Observa que la tabla #tabla3 no es incluida como resultado de la selección, ya que su padre directo es un elemento span.

 

Selector Hijo II

Veamos qué resultado obtendríamos si utilizamos el selector $("div.parte > table") en nuestro código.

Selector $("div.parte > table")
Código de ejemplo
 <script type="text/javascript">
$(document).ready(
function(){
  //mostrar por consola los elementos que componen la seleccion
  console.log( $("div.parte > table") );

});
</script>
Resultado de la selección

A diferencia del selector anterior, éste también devolverá elementos de tipo table, pero solamente aquellos cuyo padre directo sea un elemento div con la clase "parte".

En este caso, el resultado solamente incluirá un elementos: la tabla #tabla1, cuyo elemento padre es un elemento que cumple con el selector div.parte .

 

Selector Descendiente $("div table")

Con el Selector Descendiente podremos realizar consultas sobre el DOM y localizar los elementos descendientes de cualquier nivel que cumplan con el fragmento del selector situado a la derecha del símbolo " ", siendo elementos que se encuentren dentro del árbol del DOM de  los elementos correspondientes al  fragmento del selector previo al espacio .

Este selector es menos restrictivo que el Selector Hijo, puesto que jQuery buscará sobre los elementos descendientes de cualquier nivel, mientras que el Selector Hijo solamente realizará la buscará los descendientes de primer nivel (hijos directos).

Veamos un ejemplo sobre el mismo fragmento de HTML utilizado con el Selector Hijo.

 <div id="todo">
  <div class="parte" id="hijo1">
    <table id="tabla1"><tr><td></td></tr></table>
  </div>
  <div class="parte" id="hijo2">
    <div id="subhijo1">
      <table id="tabla2"><tr><td></td></tr></table>
    </div>
  </div>
  <div class="parte" id="hijo3">
    <span id="subhijo2">
      <table id="tabla3"><tr><td></td></tr></table>
    </span>
  </div>
</div>

Vamos a modificar el selector $("div > table") - Selector Hijo - para formar el Selector Descendiente $("div table")

Selector $("div table")
Código de ejemplo
 <script type="text/javascript">
$(document).ready(
function(){
  //mostrar por consola los elementos que componen la seleccion
  console.log( $("div table") );

});
</script>
Resultado de la selección

Con el selector jerárquico Selector Descendiente, los elementos devueltos en el resultado serán elementos de tipo table que, en la estructura de árbol del DOM, contengan algún predecesor de tipo div.

La selección contendrá tres elementos: la tabla #tabla1 que se encuentra dentro del div #hijo1, la tabla #tabla2 que se encuentra dentro del div #subhijo1 y la tabla #tabla3 que tiene entre sus predecesores el div #hijo3.

A diferencia del selector $("div > table"), el resultado obtenido esta ocasión sí incluye la tabla #tabla3, puesto que uno de sus ancestros - aunque no sea el padre directo -  es un elemento div.
Selector Descendiente

Selector Contiguo $("div + table")

El Selector Contiguo permitirá definir un selector con el que localizar los elementos del DOM que cumplan con las especificaciones indicadas en el fragmento del selector situado a la derecha del símbolo "+" y que se encuentre inmediatamente precedido de un elemento que cumpla con la parte del selector a la izquierda del "+". Ambos elementos (el que cumple con las especificaciones del fragmento de la izquerda y el que cumple con las especificaciones del fragmento de la derecha ) deben estar contenidos dentro de un elemento padre común.

Veamos un ejemplo básico de este selector. Supongamos que disponemos del siguiente fragmento de HTML:

 <div id="todo">
  <h1>Encabezado de primer nivel</h1>
  <h2>Primer Encabezado de segundo nivel</h2>
  <p>Contenido del documento</p>
  <p>Contenido del documento</p>
  <h2>Segundo Encabezado de segundo nivel</h2>
  <h3>Encabezado de primer nivel</h3>
  <p>Contenido del documento</p>
  <p>Contenido del documento</p>
</div>

El selector $("h1 + h2") obtendrá los elementos h2 que se encuentran directamente precedidos de un elemento h1

Selector $("h1 + h2")
Código de ejemplo
 <script type="text/javascript">
$(document).ready(
function(){
  //mostrar por consola los elementos que componen la seleccion
  console.log( $("h1 + h2") );

});
</script>
Resultado de la selección

Con el selector $("h1 + h2"), jQuery seleccionará únicamente los elementos h2 que están inmediatamente después de un elemento h1. En el caso que nos compete, solamente el elemento <h2>Primer Encabezado de segundo nivel</h2> , que se encuentra justo después del encabezado h1 será seleccionado.

Con este selector, el elemento <h2>Segundo Encabezado de segundo nivel</h2>
no será seleccionado dado que el elemento que lo precede es de tipo p y no h1.

Selector Próximo Hermano $("div ~ table")

El Selector Próximo Hermano funcionará de forma similar al Selector Contiguo, siendo este segundo menos restrictivo en lo referente a la proximidad de los elementos. Mientras que el Selector Contiguo busca elementos que se encuentren obligatoriamente el uno junto al otro, el Selector Próximo Hermano solamente requerirá que ambos elementos compartan su elemento padre y, el elemento especificado tras el símbolo "~" sea posterior al elemento que cumpla con el selector previo.

Para conseguir el símbolo ~ pulsaremos la tecla Alt y, sin soltarla, pulsaremos en el teclado numérico 1  2  6.

Veamos la diferencia de funcionamiento del Selector Próximo Hermano. Vamos a trabajar con el mismo fragmento de HTML sobre el que habíamos aplicado el Selector Contiguo:

 <div id="todo">
  <h1>Encabezado de primer nivel</h1>
  <h2>Primer Encabezado de segundo nivel</h2>
  <p>Contenido del documento</p>
  <p>Contenido del documento</p>
  <h2>Segundo Encabezado de segundo nivel</h2>
  <h3>Encabezado de primer nivel</h3>
  <p>Contenido del documento</p>
  <p>Contenido del documento</p>
</div>

En este caso, el selector $("h1 ~ h2") obtendrá los elementos h2 posteriores a un elemento h1 que comparta su elemento padre.

Selector $("h1 ~ h2")
Código de ejemplo
 <script type="text/javascript">
$(document).ready(
function(){
  //mostrar por consola los elementos que componen la seleccion
  console.log( $("h1 ~ h2") );

});
</script>
Resultado de la selección

Con el selector $("h1 ~ h2"), jQuery seleccionará los elementos h2 posteriores a un elemento h1. En este caso se seleccionarán los dos elementos de tipo h2 que comparten padre con el elemento h1.

En este caso, el elemento <h2>Segundo Encabezado de segundo nivel</h2>
también será seleccionado puesto que se encuenrea dentro del mismo elemento padre y posteriormente al h1.
Selectores contiguo y próximo hermano

En el siguiente enlace encontrarás una utilidad que te permitirá ver en vivo sobre una página web de demostración cómo actúan diferentes selectores, entre los que hay ejemplos de los vistos hasta ahora. 

Banco de pruebas de selectores jQuery
https://www.w3schools.com/jquery/trysel.asp
 

Esta píldora formativa está extraída del Curso online de jQuery.

¿Te gusta el contenido de esta píldora de conocimiento?

No pierdas tu oportunidad y ¡continúa aprendiendo!

Política de privacidad

ADR Formación utiliza cookies propias y de terceros para fines analíticos anónimos, guardar las preferencias que selecciones y para el funcionamiento general de la página.

Puedes aceptar todas las cookies pulsando el botón "Aceptar" o configurarlas o rechazar su uso pulsando el botón "Configurar".

Puedes obtener más información y volver a configurar tus preferencias en cualquier momento en la Política de cookies