Форум

mediafoks · #1 (**permalink**) 07.04.2021, 14:32

Добрый день!
Подскажите пожалуйста. Как получить первый общий родитель у одинаковых элементов.
Например: есть несколько одинаковых элементов, в моем случае это ссылки a.link
Как добраться до их первого общего родителя, в моем случае это div.general ?
Причем вложенность может быть любая, главное что, элементы одинаковые (т.е. определенный класс или data атрибут какой-то) и у них найти первый общий родитель. Иными словами если у этих элементов есть общий родитель, то найти его.

<div class="other">
     <div class="general">
         <div><a href="#" class="link" data-title="ok">ссылка</a></div>
         <div><a href="#" class="link" data-title="ok">ссылка</a></div>
         <div>
             <div><a href="#" class="link" data-title="ok">ссылка</a></div>
         </div>
     </div>
</div>

Alexandroppolus · #2 (**permalink**) 07.04.2021, 14:44

Какая-то размытая постановка задачи. Что есть "одинаковые элементы"? Это когда совпадают по тэгу и классу? А если есть несколько наборов одинаковых элементов, например, 2 штуки a.link и 2 штуки a.zzz ?

mediafoks · #3 (**permalink**) 07.04.2021, 14:53

Да, немного не точно описал. Имеется ввиду одинаковые элементы, например по классу, в моем случае a.link

Alexandroppolus · #4 (**permalink**) 07.04.2021, 14:55

ну то есть надо найти первый попавшийся набор одинаковых элементов, и потом для этого набора найти общего родителя?

mediafoks · #5 (**permalink**) 07.04.2021, 14:57

Да. Известны какие-то элементы, например a.link, или например с каким-то одинаковым data атрибутом. И если у них есть общий родитель, то найти его.
Проще говоря, мне нужно получить класс их первого общего родителя.

voraa · #6 (**permalink**) 07.04.2021, 16:35

<body>
<div class="other">
     <div class="general">
         <div><a href="#" class="link" data-title="ok">ссылка</a></div>
         <div><a href="#" class="link" data-title="ok">ссылка</a></div>
         <div>
             <div><a href="#" class="link" data-title="ok">ссылка</a></div>
         </div>
     </div>
</div>
<script>
const generalParent =(...chlds) => {
	let par = chlds[0]
	while (par = par.parentElement) {
		if (chlds.every(e => par.contains(e))) return par;
	}
	return null;
}

alert(generalParent (...document.querySelectorAll('a.link'))?.classList)
</script>
</body>

mediafoks · #7 (**permalink**) 07.04.2021, 16:45

Невероятно! Спасибо тебе добрый человек, всё отлично!

Форум

Справочник

Discord чат

Курсы javascript