Estoy tratando de obtener el elemento primario más cercano de un elemento.

Mirando .closest(), parece para devolver el elemento en sí si el selector coincide con él:

El método más cercano () atraviesa el Elemento y sus padres (encabezado hacia la raíz del documento) hasta que encuentre un nodo que coincida con el cadena de selector proporcionada. Se devolverá a sí mismo o el ancestro coincidente. Si no existe tal elemento, devuelve nulo.

(el énfasis es mío)

Entonces, ¿cuál sería la mejor manera de obtener el padre más cercano de un elemento dado un selector?

Ejemplo

var el = document.getElementById('foo');
var closestParent = el.closest('div');
console.log(closestParent);
<div>root
  <div>level1
    <div id='foo'>level2</div>
  </div>
</div>

Como puede ver, el.closest('div'); devuelve el en sí mismo, no su padre más cercano que coincida con el selector div (nivel1), que es lo que necesito.

Sé que en este caso simplemente puedo hacer closestParent.parentElement, pero esto es solo un ejemplo, y estoy tratando de averiguar si es posible evitar que .closest() devuelva el elemento en sí.

0
umbe1987 23 jun. 2020 a las 12:43

2 respuestas

La mejor respuesta

La función más cercana es devolver el elemento correcto. Está buscando el div más cercano, que resulta ser él mismo.

Si tuvieras una estructura como esta:

<div>root
  <div>level1
    <span id='foo'>level2</span>
  </div>
</div>

Entonces obtendría el nivel 1 padre con su código.

Si desea excluir el elemento actual, simplemente use parentNode

var el = document.getElementById('foo');
var closestParent = el.parentNode.closest('div');
console.log(closestParent);
1
Abhishek Kumar Tiwari 23 jun. 2020 a las 09:58

Documento de cierre Aquí hay un DOM, no se trata del padre, se trata del Elemento más cercano, por lo que puede cambiar su consulta como se muestra a continuación, pero si necesita padres, simplemente use parentEelement

var el = document.getElementById('foo');
var closestParent = el.closest('div:not(#foo)');
console.log(closestParent);
<div>root
  <div>level1
    <div id='foo'>level2</div>
  </div>
</div>
1
H.Rafiee 23 jun. 2020 a las 09:56