jQuery
Atravesando DOM

Selecciona los hijos del elemento.

Para seleccionar los elementos secundarios de un elemento, puede utilizar el método children() .

<div class="parent">
    <h2>A headline</h2>
    <p>Lorem ipsum dolor sit amet...</p>
    <p>Praesent quis dolor turpis...</p>
</div>

Cambia el color de todos los hijos del elemento .parent :

$('.parent').children().css("color", "green");

El método acepta un argumento selector opcional que se puede usar para filtrar los elementos que se devuelven.

// Only get "p" children
$('.parent').children("p").css("color", "green");

Iterando sobre la lista de elementos jQuery

Cuando necesite iterar sobre la lista de elementos jQuery.

Considere esta estructura DOM:

<div class="container">
    <div class="red one">RED 1 Info</div>
    <div class="red two">RED 2 Info</div>
    <div class="red three">RED 3 Info</div>
</div>

Para imprimir el texto presente en todos los elementos div con una clase de red :

$(".red").each(function(key, ele){
    var text = $(ele).text();
    console.log(text);
});

Consejo: la key es el índice del elemento div.red que estamos iterando actualmente, dentro de su elemento primario. ele es el elemento HTML, por lo que podemos crear un objeto jQuery a partir de él usando $() o jQuery() , así: $(ele) . Después, podemos llamar a cualquier método jQuery en el objeto, como css() u hide() etc. En este ejemplo, simplemente extraemos el texto del objeto.

Seleccionando hermanos

Para seleccionar los hermanos de un elemento, puede usar el método .siblings() .

Un ejemplo típico en el que desea modificar los hermanos de un elemento es en un menú:

<ul class="menu">
    <li class="selected">Home</li>
    <li>Blog</li>
    <li>About</li>
</ul>

Cuando el usuario hace clic en un elemento del menú, la clase selected debe agregarse al elemento seleccionado y eliminarse de sus hermanos :

$(".menu").on("click", "li", function () {
    $(this).addClass("selected");
    $(this).siblings().removeClass("selected");
});

El método toma un argumento selector opcional, que se puede usar si necesita reducir los tipos de hermanos que desea seleccionar:

$(this).siblings("li").removeClass("selected");

método más cercano ()

Devuelve el primer elemento que coincide con el selector que comienza en el elemento y atraviesa el árbol DOM.

HTML

<div id="abc" class="row">
    <div id="xyz" class="row">
    </div>
    <p id="origin">
      Hello
    </p>
</div>

jQuery

var target = $('#origin').closest('.row');
console.log("Closest row:", target.attr('id') );

var target2 = $('#origin').closest('p');
console.log("Closest p:", target2.attr('id') );

SALIDA

"Closest row: abc"
"Closest p: origin"

Método first (): el primer método devuelve el primer elemento del conjunto de elementos coincidentes.

HTML

<div class='.firstExample'>
   <p>This is first paragraph in a div.</p>
   <p>This is second paragraph in a div.</p>
   <p>This is third paragraph in a div.</p>
   <p>This is fourth paragraph in a div.</p>
   <p>This is fifth paragraph in a div.</p>
</div>

JQuery

var firstParagraph = $("div p").first();
console.log("First paragraph:", firstParagraph.text());

Salida:

First paragraph: This is first paragraph in a div.

Obtener el siguiente elemento

Para obtener el siguiente elemento puede usar el método .next() .

<ul>
    <li>Mark</li>
    <li class="anna">Anna</li>
    <li>Paul</li>
</ul>

Si está de pie en el elemento "Anna" y desea obtener el siguiente elemento, "Paul", el método .next() le permitirá hacerlo.

// "Paul" now has green text
$(".anna").next().css("color", "green");

El método toma un argumento selector opcional, que se puede usar si el siguiente elemento debe ser un cierto tipo de elemento.

// Next element is a "li", "Paul" now has green text
$(".anna").next("li").css("color", "green");

Si el siguiente elemento no es del selector tipo selector se devuelve un conjunto vacío, y las modificaciones no harán nada.

// Next element is not a ".mark", nothing will be done in this case
$(".anna").next(".mark").css("color", "green");

Obtener elemento anterior

Para obtener el elemento anterior puede usar el método .prev() .

<ul>
    <li>Mark</li>
    <li class="anna">Anna</li>
    <li>Paul</li>
</ul>

Si se encuentra en el elemento "Anna" y desea obtener el elemento anterior, "Mark", el método .prev() le permitirá hacerlo.

// "Mark" now has green text
$(".anna").prev().css("color", "green");

El método toma un argumento selector opcional, que se puede usar si el elemento anterior debe ser un cierto tipo de elemento.

// Previous element is a "li", "Mark" now has green text
$(".anna").prev("li").css("color", "green");

Si el elemento anterior no es del selector tipo selector se devuelve un conjunto vacío y las modificaciones no harán nada.

// Previous element is not a ".paul", nothing will be done in this case
$(".anna").prev(".paul").css("color", "green");

Filtrar una selección

Para filtrar una selección puede usar el método .filter() .

El método se llama en una selección y devuelve una nueva selección. Si el filtro coincide con un elemento, entonces se agrega a la selección devuelta, de lo contrario se ignora. Si no hay ningún elemento que coincida, se devuelve una selección vacía.

El HTML

Este es el HTML que usaremos.

<ul>
    <li class="zero">Zero</li>
    <li class="one">One</li>
    <li class="two">Two</li>
    <li class="three">Three</li>
</ul>

Selector

Filtrar usando selectores es una de las formas más simples de filtrar una selección.

$("li").filter(":even").css("color", "green"); // Color even elements green
$("li").filter(".one").css("font-weight", "bold"); // Make ".one" bold

Función

Filtrar una selección utilizando una función es útil si no es posible utilizar selectores.

La función se llama para cada elemento de la selección. Si devuelve un valor true , entonces el elemento se agregará a la selección devuelta.

var selection = $("li").filter(function (index, element) {
    // "index" is the position of the element
    // "element" is the same as "this"
    return $(this).hasClass("two");
});
selection.css("color", "green"); // ".two" will be colored green

Elementos

Puede filtrar por elementos DOM. Si los elementos DOM están en la selección, se incluirán en la selección devuelta.

var three = document.getElementsByClassName("three");
$("li").filter(three).css("color", "green");

Selección

También puede filtrar una selección por otra selección. Si un elemento está en ambas selecciones, se incluirá en la selección devuelta.

var elems = $(".one, .three");
$("li").filter(elems).css("color", "green");

método encontrar ()

El método .find () nos permite buscar a través de los descendientes de estos elementos en el árbol DOM y construir un nuevo objeto jQuery a partir de los elementos correspondientes.

HTML

     <div class="parent">
        <div class="children" name="first">
            <ul>
                <li>A1</li>
                <li>A2</li>
                <li>A3</li>
            </ul>
        </div>
        <div class="children" name="second">
            <ul>
                <li>B1</li>
                <li>B2</li>
                <li>B3</li>
            </ul>
        </div>
       </div>

jQuery

 $('.parent').find('.children[name="second"] ul li').css('font-weight','bold');

Salida

• A1
• A2
• A3

• B1
• B2
• B3