Перевірте, чи має якийсь предк клас, використовуючи jQuery

156

Чи є в jQuery спосіб перевірити, чи є у когось з батьків, правнуків, правнуків.

У мене є структура розмітки, яка дозволила мені робити такі речі в коді:

$(elem).parent().parent().parent().parent().hasClass('left')

Однак для читабельності коду я б хотів уникати подібних речей. Чи є якийсь спосіб сказати "у когось із батьків / дідусів / правнуків є цей клас"?

Я використовую jQuery 1.7.2.

— crmpicco
джерело

stackoverflow.com/questions/16863917/… - якщо хтось захоче зробити це без jQuery

— Роберт Неєстрой,

Відповіді:

304

if ($elem.parents('.left').length) {

}

— Олексій
джерело

Спасибі, саме те, що мені було потрібно! Натомість, хоча практика трактування .lengthяк істинного значення є досить плідною в JS, це набагато зрозуміліше і простіше зрозуміти.length > 0

— dooleyo

Ось посилання на Jquery .parents () документації

— H Dog

Існує багато способів фільтрації за предками елементів.

if ($elem.closest('.parentClass').length /* > 0*/) {/*...*/}
if ($elem.parents('.parentClass').length /* > 0*/) {/*...*/}
if ($elem.parents().hasClass('parentClass')) {/*...*/}
if ($('.parentClass').has($elem).length /* > 0*/) {/*...*/}
if ($elem.is('.parentClass *')) {/*...*/}

Остерігайся ,closest() метод включає сам елемент під час перевірки на вибір.

Крім того, якщо у вас є унікальний селектор, який відповідає $elem, наприклад #myElem, ви можете використовувати:

if ($('.parentClass:has(#myElem)').length /* > 0*/) {/*...*/}
if(document.querySelector('.parentClass #myElem')) {/*...*/}

Якщо ви хочете відповідати елементу залежно від будь-якого класу предків лише для цілей стилізації, просто використовуйте правило CSS :

.parentClass #myElem { /* CSS property set */ }

— А. Вольф
джерело

Я міг би зважитися сказати (не перевіряючи цього), що цей метод кращий. Elem.parents перейде всю батьківську структуру dom, де найближчий () повинен (мабуть) зупинитися, коли він знайде найближчого батьківського елемента з цим елементом і, отже, буде більш ефективним. Це неосвічена здогадка. Зазвичай я використовую найближчий (). Схоже, я знайшов нову тему для дослідження свого блогу! : P

— dudewad

@dudewad так, але це зовсім недавно. Я маю на увазі у більш старій версії jq, AFAIK, це було не так. Петля батьків не була розірвана на першому батьківському збірці за допомогою найближчого (), але тепер це так. (не знаю, з якої версії jq, але я впевнений, що я правдивий у цьому твердженні)

— А. Вольф

Добре знати, дякую за інформацію. Дивно, що вони не побудували б перерву в першій версії.

— dudewad

коли батьків не знайти, батьків () швидше, ніж найближчих () jsperf.com/closest-vs-parents-foobar

— Олексій

@Alex Досить цікаво дійсно, THX для введення! До речі, перечитуючи питання, Is there any way in jQuery to check if any parent,..., closest()перевірка самого елемента , так це на самому ділі не відповідаючи на питання, ОП може побажати explecitely виключити сам елемент, так уа, відповідь має був використовувати.parents()

— А. Вольфа

Ви можете скористатися parentsметодом із зазначеним .classселектором і перевірити, чи відповідає якийсь із них:

if ($elem.parents('.left').length != 0) {
    //someone has this class
}

— Ігор Димов
джерело