jQuery recorrido - método children()

Instancia

Encontrar todos los elementos hijos de los div con el nombre de clase "selected" y establecerlos en azul:

$("div").children(".selected").css("color", "blue");

Prueba personalmente

Definición y uso

El método children() devuelve todos los elementos secundarios directos del elemento seleccionado.

Sintaxis

.children(selector)
Parámetro Descripción
selector Valor de cadena, que contiene la expresión de selector que coincide con los elementos.

Descripción detallada

Si se proporciona un objeto jQuery que representa una colección de elementos DOM, el método .children() nos permite recuperar estos elementos del árbol DOM y construir un nuevo objeto jQuery con los elementos coincidentes..find() Similar a .children(), pero este solo se extiende por un nivel único del árbol DOM.

Tenga en cuenta que, al igual que la mayoría de los métodos de jQuery, .children() no devuelve nodos de texto; si necesita obtener todos los nodos secundarios que contienen texto y comentarios, utilice .contents().

Este método acepta una expresión de selector como parámetro opcional, del mismo tipo que los parámetros pasados a $(). Si se aplica el selector, se prueba si los elementos coinciden con la expresión, para filtrar estos elementos.

Pensar en esta página con lista anidada de base

<ul class="level-1">
  <li class="item-i">I</li>
  <li class="item-ii">II
    <ul class="level-2">
      <li class="item-a">A</li>
      <li class="item-b">B
        <ul class="level-3">
          <li class="item-1">1</li>
          <li class="item-2">2</li>
          <li class="item-3">3</li>
        </ul>
      </li>
      <li class="item-c">C</li>
    </ul>
  </li>
  <li class="item-iii">III</li>
</ul>

Prueba personalmente

Si comenzamos con la lista level-2, podemos encontrar sus elementos secundarios:

$('ul.level-2').children().css('background-color', 'red');

El resultado de esta línea de código es que los proyectos A, B, C tienen fondo rojo. Debido a que no hemos aplicado una expresión de selector, el objeto jQuery devuelto contiene todos los elementos secundarios. Si se aplica un selector, solo incluirá los proyectos que coincidan.