Изменение класса родителя в зависимости от кол-ва определённых дочерних элементов через JS
У нас есть код:
<dl class="contacts details">
<h3 class="contacts">Contacts:</h3>
<a class="Website Icons" href="https://test.com/"></a>
<a class="Kik Icons" href="https://www.kik.me/test"></a>
<a class="Snap Icons" href="https://www.snapchat.com/add/test"></a>
<a class="Telegram Icons" href="https://t.me/test"></a>
</dl>
Что нужно?
Добавить класс к <dl class="contacts details"> в зависимости от количества <a> внутри, например,
если один <a>, то <dl class="contacts details one">,
если два <a>, то <dl class="contacts details two">,
если три <a>, то <dl class="contacts details three"> и так до шести.
Всем безумно благодарен за помощь!
Ответы (1 шт):
Автор решения: Meth0d
→ Ссылка
const wrapper = document.querySelector('.details')
const length = wrapper.querySelectorAll('a').length
length === 1
? wrapper.classList.add('one')
: length === 2
? wrapper.classList.add('two')
: length === 3
? wrapper.classList.add('three')
: ...
далее по аналогии. можно сделать проще, добавляя какой-нибудь класс типа length1 - length6
const wrapper = document.querySelector('.details')
const length = wrapper.querySelectorAll('a').length
wrapper.classList.add(`length${length}`)