Я действительно пытаюсь понять, как это сделать. Я хочу проверить, если класс exesits где-то в одном из родительских элементов элемента.
Я не хочу использовать какую-либо библиотеку, просто ваниль JS.
В приведенных ниже примерах он должен возвращать значение true, если рассматриваемый элемент находится где-то в дочерних элементах элемента с "классом" в качестве имени класса.
Я думаю, что это будет что-то вроде этого с jQuery:
if( $('#the-element').parents().hasClass('the-class') ) {
return true;
}
Итак, это возвращает true:
<div>
<div class="the-class">
<div id="the-element"></div>
</div>
</div>
Так делает это:
<div class="the-class">
<div>
<div id="the-element"></div>
</div>
</div>
... но это возвращает false:
<div>
<div class="the-class">
</div>
<div id="the-element"></div>
</div>
Вам нужно будет сделать это рекурсивно:
// 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);
}
Демонстрация (откройте консоль, чтобы увидеть true)
Код
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;
}
ИЛИ
function hasClass(element, className) {
do {
if (element.classList && element.classList.contains(className)) {
return true;
}
element = element.parentNode;
} while (element);
return false;
}
Вы можете использовать some и contains для достижения результата:
function hasParentWithMatchingSelector (target, selector) {
return [...document.querySelectorAll(selector)].some(el =>
el !== target && el.contains(target)
)
}
// usage
hasParentWithMatchingSelector(myElement, '.some-class-name');
Я в порядке с функцией, которую Denys Séguret опубликовал, выглядит элегантно, и мне это нравится.
Я немного изменил эту функцию, поскольку, если класс, указанный в параметре, отсутствует во всей DOM, он терпит неудачу, когда рекурсия достигает объекта документа, потому что это правда, что мы управляем, если элемент имеет родительский node ( в последней строке, а когда документ является элементом, родительский node имеет значение NULL), но перед тем, как мы выполним предыдущую строку, а когда этот элемент является документом, document.className - undefined, и он не работает, поэтому элемент управления должен быть перемещен в верхнюю часть.
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);
}
Я считаю, if( $('#the-element').parents('.the-class').length ) быть более эффективным, но, возможно, не таким, как читаемый человеком; который с querySelector на картинке может быть заменен следующим образом:
function hasParent(element, parentSelector) {
var potentialParents = document.querySelectorAll(parentSelector);
for(i in potentialParents) if(potentialParents[i].contains(element))
return potentialParents[i];
return false;
}
Это даст вам возможность:
var elm = document.getElementById('the-element');
if(hasParent(elm, '.the-class')) return true;
Вы можете использовать метод closest() Element, который пересекает родительские элементы (направляясь к корню документа) Элемента, пока не найдет узел, который соответствует предоставленной строке selectorString. Вернет себя или соответствующего предка. Если такого элемента не существует, возвращается ноль.
Вы можете преобразовать возвращаемое значение в логическое значение
const el = document.getElementById('div-03');
const r1 = el.closest("#div-02");
console.log(Boolean(r1));
// returns the element with the id=div-02
const r2 = el.closest("#div-not-exists");
console.log(Boolean(r2));<article>
<div id="div-01">Here is div-01
<div id="div-02">Here is div-02
<div id="div-03">Here is div-03</div>
</div>
</div>
</article>Мой пример для Vanilla JS, он использует ванильный эквивалент parents() из jQuery
var htmlElement = <htmlElement>,
parents = [],
classExist;
while (htmlElement = htmlElement.parentNode.closest(<parentSelector>)) {
parents.push(htmlElement);
}
classExist = (parents > 0);
Итак, ваш селектор должен быть .className
И просто проверьте, является ли родительский > 0
Еще одна альтернатива для тех, кто любит этот стиль для современных/многозадачных браузеров.
const hasClass = (element, className) => {
return element.classList.contains(className);
};
const hasParent = (element, className) => {
if (!element.parentNode) {
return false;
}
if (hasClass(element, className)) {
return true;
}
return hasParent(element.parentNode, className)
};
Рабочая демонстрация:
const hasClass = (element, className) => {
return element.classList.contains(className);
};
const hasParent = (element, className) => {
if (!element.parentNode) {
return false;
}
if (hasClass(element, className)) {
return true;
}
return hasParent(element.parentNode, className)
};
/* Demo Code, can ignore */
const child = document.getElementById('child');
const orphan = document.getElementById('orphan');
const output = document.getElementById('output');
const log = 'child has parent? ${hasParent(child, 'list')}
orphan has parent? ${hasParent(orphan, 'list')}
'
output.innerText = log;#output {
margin-top: 50px;
background: black;
color: red;
padding: 20px;
}<div>
<ul class="list">
<li>
<a id="child" href="#">i have a parent</a>
</li>
</ul>
</div>
<div>
<ul>
<li>
<a id="orphan" href="#">im an orphan</a>
</li>
</ul>
</div>
<div id="output"></div>я написал маленький отрывок, чтобы пройти через DOM, чтобы найти первый соответствующий parentNode.
Надеюсь, это когда-нибудь кому-нибудь поможет.
(/¯◡ ‿ ◡) ⊃━ ☆ ﾟ. * ･｡ ﾟ,
function getFirstParentMatch(element, selector) {
if (!element) {return element};
element.matches(selector) || (element = (element.nodeName.toLowerCase() === 'html' ? false : getFirstParent(element.parentNode, selector)));
return element;
}
Поскольку идентификатор должен быть уникальным в контексте документа, вы можете просто использовать вместо него:
return !!document.querySelector('.the-class #the-element');
Если вы хотите включить сам элемент, вы можете использовать:
return !!document.querySelector('.the-class #the-element, #the-element.the-class');