javascript - page - Compruebe si la clase existe en algún lugar entre los padres: vanilla JS

title html

Question

Estoy realmente luchando para ver cómo hacer esto. Quiero verificar si una clase se encuentra en algún lugar de uno de los elementos principales de un elemento.

No quiero usar ninguna biblioteca, solo vanilla JS.

En los ejemplos a continuación, debe devolver verdadero si el elemento en cuestión reside en algún lugar de los elementos secundarios de un elemento con "la clase" como el nombre de la clase.

Creo que sería algo como esto con jQuery:

if( $(''#the-element'').parents().hasClass(''the-class'') ) {
    return true;
}

Así que esto devuelve verdadero:

<div>
    <div class="the-class">
        <div id="the-element"></div>
    </div>
</div>

Así hace esto:

<div class="the-class">
    <div>
        <div id="the-element"></div>
    </div>
</div>

... pero esto devuelve falso:

<div>
    <div class="the-class">
    </div>
    <div id="the-element"></div>
</div>

Answer 1

Creo que if( $(''#the-element'').parents(''.the-class'').length ) sea ​​más eficiente, pero quizás no tan legible para los humanos; que, con querySelector en la imagen, podría reemplazarse con el siguiente método:

function hasParent(element, parentSelector) {
    var potentialParents = document.querySelectorAll(parentSelector);
    for(i in potentialParents) if(potentialParents[i].contains(element))
        return potentialParents[i];
    return false;
}

Eso te daría la posibilidad de hacer:

var elm = document.getElementById(''the-element'');
if(hasParent(elm, ''.the-class'')) return true;

Answer 2

Debido a que la ID debe ser única en el contexto del documento, podría usar en su lugar:

return !!document.querySelector(''.the-class #the-element'');

Si quieres incluir el elemento, puedes usar:

return !!document.querySelector(''.the-class #the-element, #the-element.the-class'');

Answer 3

El fiddle

El código

function hasClass(element, className) {
  var regex = new RegExp(''//b'' + className + ''//b'');
  do {
    if (regex.exec(element.className)) {
      return true;
    }
    element = element.parentNode;
  } while (element);
  return false;
}

O

function hasClass(element, className) {
  do {
    if (element.classList && element.classList.contains(className)) {
      return true;
    }
    element = element.parentNode;
  } while (element);
  return false;
}

Answer 4

Estoy bien con la función que publicó Denys Séguret , se ve elegante y me gusta. Acabo de modificar un poco esa función, ya que si la clase especificada en el parámetro no está presente en todo el DOM, falla cuando la recursión llega al objeto del documento porque es cierto que controlamos si el elemento tiene el nodo principal (en el última línea, y cuando el documento es el elemento, el nodo principal es nulo), pero antes de ejecutar la línea anterior, y cuando el elemento es el documento, document.className undefined está undefined y falla, por lo que el control debe moverse a la parte superior .

function hasSomeParentTheClass(element, classname) {
    //
    // If we are here we didn''t find the searched class in any parents node
    //
    if (!element.parentNode) return false;
    //
    // If the current node has the class return true, otherwise we will search
    // it in the parent node
    //
    if (element.className.split('' '').indexOf(classname)>=0) return true;
    return hasSomeParentTheClass(element.parentNode, classname);
}

Answer 5

Mi ejemplo para Vanilla JS, es usar un equivalente de vainilla de los parents() de jQuery

var htmlElement = <htmlElement>,
    parents = [],
    classExist;
while (htmlElement = htmlElement.parentNode.closest(<parentSelector>)) {
    parents.push(htmlElement);
}
classExist = (parents > 0);

Así que tu selector solo para ser un .className

Y solo verifica si el padre es> 0

Answer 6

Puedes usar some y contains para lograr el resultado:

function hasParentWithMatchingSelector (target, selector) {
  return [...document.querySelectorAll(selector)].some(el =>
    el !== target && el.contains(target)
  )
}

// usage
hasParentWithMatchingSelector(myElement, ''.some-class-name'');

Answer 7

Tendrás que hacerlo recursivamente:

// returns true if the element or one of its parents has the class classname
function hasSomeParentTheClass(element, classname) {
    if (element.className.split('' '').indexOf(classname)>=0) return true;
    return element.parentNode && hasSomeParentTheClass(element.parentNode, classname);
}

Demonstration (abre la consola para ver true )