Los últimos tutoriales de desarrollo web
 

jQuery closest() Method

Métodos de desplazamiento <jQuery

Ejemplo

Devolver el primer antepasado de <span> , que es un <ul> elemento:

$(document).ready(function(){
    $("span").closest("ul").css({"color": "red", "border": "2px solid red"});
});

Resultado:

body (great-great-grandparent)
div (great-grandparent)
    ul (second ancestor - second grandparent)
      ul (first ancestor - first grandparent)
    • li (direct parent)  span  
     
Inténtalo tú mismo "

Definición y Uso

El closest() método devuelve el primer antepasado del elemento seleccionado.

Un antepasado es un padre, abuelo, bisabuelo, y así sucesivamente.

El árbol DOM: Este método de desplazamiento hacia arriba desde el elemento actual, todo el camino hasta el elemento raíz del documento (<html>) , para encontrar el primer antepasado de los elementos DOM.

Este método es similar a parents() , en que ambos atraviesan el árbol DOM. Las diferencias son las siguientes:

closest()

  • Comienza con el elemento actual
  • Viaja por el árbol DOM y devuelve el primer antepasado (individual) que coincide con la expresión pasada
  • El objeto jQuery devuelta contiene cero o un elemento

parents()

  • Comienza con el elemento padre
  • Viaja por el árbol DOM y devuelve todos los antepasados ​​que coincide con la expresión pasada
  • El objeto jQuery devuelto contiene cero o más de un elemento

Otros métodos relacionados:

  • parent() - devuelve el elemento de matriz directa del elemento seleccionado
  • parentsUntil() - devuelve todos los elementos antecesores entre dos argumentos dados

Sintaxis

Devolver el primer antepasado del elemento seleccionado:

$(selector).closest( filter )

Devolver el primer antepasado usando un contexto DOM para buscar el árbol DOM dentro:

$(selector).closest( filter,context )

Parámetro Descripción
filter Necesario. Especifica una expresión de selección, elemento u objeto jQuery para limitar la búsqueda ancestro
context Opcional. Un elemento DOM dentro de la cual se puede encontrar un elemento coincidente

Inténtelo usted mismo - Ejemplos

Devuelve el primer antepasado de <span> , que es un <span> elemento
Debido a que este método comienza con el elemento actual, una búsqueda de la primera <span> de <span> , volverá <span> .

Pasar de un elemento DOM como el contexto en el que para buscar el primer elemento antecesor
El uso de ambos parámetros a pasar en un elemento DOM como el contexto en el que la búsqueda de la primera <ul> elemento.


Métodos de desplazamiento <jQuery