Cómo encontrar el hijo de un elemento HTML en jQuery

Escrito por sara williams | Traducido por paula ximena cassiraga
  • Comparte
  • Twittea
  • Comparte
  • Pin
  • E-mail
Cómo encontrar el hijo de un elemento HTML en jQuery
Aprende a encontrar el hijo de un elemento HTML en jQuery. (George Doyle/Stockbyte/Getty Images)

Los elementos HTML incluyen cualquier parte de una página web, como encabezados, tablas, imágenes y párrafos. Cuando intercalas variables HTML una dentro de otra, creas elementos padre e hijos. El elemento superior es el padre, mientras que todos los elementos intercalados se convierten en hijos. En jQuery, puedes obtener el hijo de un elemento usando la función “children()” (hijo, en inglés), pero debes recorrer la matriz de valores que esa función crea.

Nivel de dificultad:
Moderado

Otras personas están leyendo

Instrucciones

  1. 1

    Revisa que tu código incluya una referencia a la biblioteca de jQuery antes de intentar realizar la secuencia de comandos en jQuery. Agrega este código dentro de las variables “<head>” (encabezado) de tu página web, si no ves la referencia:

    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"></script>

  2. 2

    Agrega un par de variables de secuencias de comando debajo de la referencia de biblioteca de jQuery y escribe una función para revisar que la página haya terminado de cargarse. Toda tu secuencia de comandos debería estar entre las llaves de esta función:

    <script type=”text/javascript”> $(function() { }); </script>

  3. 3

    Selecciona el elemento HTML que necesitas para obtener una lista de elementos hijos a partir de él. Por ejemplo, si quieres obtener hijos de una lista desordenada, selecciona el elemento "ul". Anexa el selector con la función “children()” para obtener el hijo:

    $('ul.level-2').children();

    El ejemplo previo seleccionará cualquier lista desordenada que tenga un nombre de clase de "nivel-2". No obstante, cuando “children()” encuentra múltiples elementos hijos, creará una matriz de valores. Necesitarás códigos especiales para procesar una matriz.

  4. 4

    Anexa “children()” con "each()" (cada) para atravesar la matriz de elementos hijos. Ya que es una estructura de bucle, necesitas una variable de contador, pero no debes crearla con anticipación en jQuery. Pasa "i" como un argumento en cada "each()" para obtener tu contador:

    $('ul.level-2').children().each(function (i) { });

  5. 5

    Declara una variable que mantendrá el valor de texto de cada elemento hijo. Puedes obtener otros valores de elementos, pero el texto devolverá cualquier texto encontrado dentro del hijo y es útil para obtener datos. Ajusta la variable a “$(this)" (esto) para obtener el elemento actual con el que la función "each()" está trabajando. Anexa “$(this)" con "text()" (texto) para obtener el texto:

    var childEl = $(this).text();

  6. 6

    Emite los valores en tu página seleccionando un elemento y anexando "append()" (anexo) para que la función "each()" pueda seguir agregando los valores que encuentra:

    $('div').append(i + “ : “ + childEl + “ ”);

    En este ejemplo, "childEl” se emite para una serie de variables "<div>”. Cada vez qe jQuery repite los códigos dentro de "each()", emite el número desde "i", agrega un par de punto y coma, emite el valor de “childEl” y finaliza la línea con una variable de guión.

  7. 7

    Tu secuencia de comandos final debería verse así:

    $(function() { $('ul.level-2').children().each(function (i) { var childEl = $(this).html(); $('div').append(i + " : " + childEl + " "); }); });

Consejos y advertencias

  • Agrega “console.log(childEl);” dentro de cada función "each()" en la última línea. Usa Firebug en Firefox o la Consola JavaScript en Google Chrome para revisar los valores en una consola al depurar.
  • Reemplaza "text()" por "html()" para obtener el código HTML de los elementos hijos.

No dejes de ver

Filtrar por:
  • Mostrar todos
  • Artículos
  • Galerías de fotos
  • Videos
Ordenar:
  • Más relevante
  • Más popular
  • Más reciente

No se encuentran artículos disponibles

No se encuentran slideshows disponibles

No se encuentran videos disponibles