Este es otro tip post para resolver algún problema recurrente. En esta ocasión hablaré cómo podemos seleccionar hijos con jQuery empleando el método find(). También hablaré que diferencia hay entre el este método y el método filter() que expliqué en otra ocasión.
Al emplear el método find() creamos un nuevo conjunto de elementos basados en el contexto del set de elementos actual y sus descendientes. Vamos a comenzar con un ejemplo donde vamos a contar los hijos que tienen diferentes párrafos. Estos párrafos contienen elementos <em> que serán los que vamos a seleccionar.
|
1 2 3 4 5 |
<p>Ut ad videntur facilisis <em>elit</em> <em>saepius</em> magna habent. </p> <p>Claram claritatem eu facer eros esse <em>tincidunt</em> anteposuerit. ii vulputate feugait.</p> <p>In quis <em>laoreet</em> Claritatem <em>consuetudium</em> wisi sit velit facilisi.</p> |
Para contar los hijos, primero selecciono los hijos con el método find() donde indicaré qué elementos tienen hijos y qué tipo de hijos buscar. Luego con mediante chaining concateno con el atributo length para que me devuelva el número de hijos.
|
1 2 3 |
<script type="text/JavaScript"> alert('Los 3 párrafos tienen un total ' + $('p').find('em').length + ' de hijos tipo <em>'); </script> |
En este fragmento vemos que selecciono todos los párrafos $(p) y empleo find() indicando que quiero todos los elementos em que estén dentro de los párrafos. Luego con length puedo contar todos los elementos ya que que find nos devuelve un set o array de elementos.
Para el siguiente ejemplo, vamos añadirle a un párrafo cualquiera la clase ‘especial‘. Lo que vamos hacer es obtener los hijos <em> del párrafo ‘.especial‘ y cambiar el color de los elementos <em>.
|
1 2 3 |
<script type="text/JavaScript"> $('.especial').find('em').css("color", '#207FC0'); </script> |
Como find() nos devuelve un set de elementos, podemos almacenarlos en una variable para luego poder recorrer los hijos de un elemento.
|
1 2 3 4 5 6 7 |
<script type="text/JavaScript"> var hijos = $('.especial').find('em'); hijos.each(function() { alert($(this).text()); }); </script> |
En este caso recorremos los elemetos que contiene la variables hijos y mostramos el texto de cada uno por pantalla.
Diferencia entre filter y find
Es algo común que la gente confunda el método find() con el método filter() que ya explique en otra ocasión. Por tanto para evitar la confusión recordad que find() es sólo para seleccionar los descendientes de un elemento mientras que filter() filtra los elementos del elemento seleccionado y obtienes un nuevo set de elementos. Por ejemplo en este ejemplo hemos usado find() para encontrar los elementos em. Si cambiamos find() por filter():
|
1 2 3 |
<script type="text/JavaScript"> $('.especial').filter('em'); </script> |
Estarías indicando que selecciones los elementos de clase ‘.especial’ que sean un elemento <em>. No te devolvería nada ya que en nuestros ejemplos no se da el caso pero, si a un <em> le añades la clase ‘especial‘ te funcionaría y te devolvería dicho elemento.
Y hasta aquí cómo seleccionar hijos con jQuery, espero que os haya servido de ayuda. A seguir picando 🙂