Método jQuery más cercano ()

❮ Métodos transversales de jQuery

Ejemplo

Devuelve el primer ancestro de <span>, que es un elemento <ul>:

$(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  
     

Definición y uso

El método más cercano () devuelve el primer antepasado del elemento seleccionado.

Un antepasado es un padre, un abuelo, un bisabuelo, etc.

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

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

más cercano()

  • Comienza con el elemento actual
  • Viaja hacia arriba en el árbol DOM y devuelve el primer antepasado (único) que coincide con la expresión pasada
  • El objeto jQuery devuelto contiene cero o un elemento

padres()

  • Comienza con el elemento padre
  • Viaja hacia arriba en el árbol DOM y devuelve todos los ancestros que coinciden 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 padre directo del elemento seleccionado
  • parentUntil() - devuelve todos los elementos antecesores entre dos argumentos dados


Sintaxis

Devuelve el primer ancestro del elemento seleccionado:

$(selector).closest(filter)

Devuelve el primer ancestro usando un contexto DOM para buscar el árbol DOM dentro:

$(selector).closest(filter,context)

Parameter Description
filter Required. Specifies a selector expression, element or jQuery object to narrow down the ancestor search
context Optional. A DOM element within which a matching element may be found

Pruébelo usted mismo - Ejemplos


Debido a que este método comienza con el elemento actual, una búsqueda del primer <span> de <span> devolverá <span>.


Usar ambos parámetros para pasar un elemento DOM como el contexto dentro del cual buscar el primer elemento <ul>.


❮ Métodos transversales de jQuery