Добавить класс дочернему элементу
Ребята, выручайте пожалуйста.
Есть вложенное меню
<div class="nav__dropdown">
<div class="nav__dropdown-item">
<a href="#" class="nav__dropdown-link">Территория обслуживания сетевой организации </a>
</div>
<div class="nav__dropdown-item">
<a href="#" class="nav__dropdown-link">Передача электрической энергии</a>
</div>
<div class="nav__dropdown-item">
<a href="#" class="nav__dropdown-link ">РАСКРЫТИЕ ИНФОРМАЦИИ</a>
<div class="nav__dropdown nav__dropdown_second">
<div class="nav__dropdown-item">
<a href="#" class="nav__dropdown-link">Общая информация о передаче электрической энергии</a>
</div>
<div class="nav__dropdown-item">
<a href="#" class="nav__dropdown-link">Нормативные документы</a>
</div>
</div>
</div>
</div>
первый уровень дивы класса nav__dropdown-item второй уровень дивы класса nav__dropdown_second Вопрос. Необходимо добавить класс "nav__dropdown-link_dropdown" к ссылке, если присутствует второй уровень вложенности. То есть, если после ссылки идет див с классом nav__dropdown_second то к ссылке надо прибавить класс "nav__dropdown-link_dropdown" В данном случае надо добавить класс "nav__dropdown-link_dropdown" к ссылке с текстом РАСКРЫТИЕ ИНФОРМАЦИИ |
[].forEach.call(document.querySelectorAll('.nav__dropdown-link'), function(el){
if(el.nextElementSibling && el.nextElementSibling.matches('.nav__dropdown_second')) el.classList.add('nav__dropdown-link_dropdown');
});
|
rafaello,
<!DOCTYPE html>
<html>
<head>
<title>Untitled</title>
<meta charset="utf-8">
<style type="text/css">
.nav__dropdown-link_dropdown{
background-color: #0000CD;
color: #FFFFFF;
}
</style>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script>
$(function() {
$(".nav__dropdown_second").prev("a.nav__dropdown-link").addClass("nav__dropdown-link_dropdown")
});
</script>
</head>
<body>
<div class="nav__dropdown">
<div class="nav__dropdown-item">
<a href="#" class="nav__dropdown-link">Территория обслуживания сетевой организации </a>
</div>
<div class="nav__dropdown-item">
<a href="#" class="nav__dropdown-link">Передача электрической энергии</a>
</div>
<div class="nav__dropdown-item">
<a href="#" class="nav__dropdown-link ">РАСКРЫТИЕ ИНФОРМАЦИИ</a>
<div class="nav__dropdown nav__dropdown_second">
<div class="nav__dropdown-item">
<a href="#" class="nav__dropdown-link">Общая информация о передаче электрической энергии</a>
</div>
<div class="nav__dropdown-item">
<a href="#" class="nav__dropdown-link">Нормативные документы</a>
</div>
</div>
</div>
</div>
</body>
</html>
|
Вариант - не обязательно рядом. В том же диве
<style>
.nav__dropdown-link_dropdown { color: red;}
</style>
<div class="nav__dropdown">
<div class="nav__dropdown-item">
<a href="#" class="nav__dropdown-link">Территория обслуживания сетевой организации </a>
</div>
<div class="nav__dropdown-item">
<a href="#" class="nav__dropdown-link">Передача электрической энергии</a>
</div>
<div class="nav__dropdown-item">
<a href="#" class="nav__dropdown-link ">РАСКРЫТИЕ ИНФОРМАЦИИ</a>
<div class="nav__dropdown nav__dropdown_second">
<div class="nav__dropdown-item">
<a href="#" class="nav__dropdown-link">Общая информация о передаче электрической энергии</a>
</div>
<div class="nav__dropdown-item">
<a href="#" class="nav__dropdown-link">Нормативные документы</a>
</div>
</div>
</div>
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script>
$('.nav__dropdown_second').parent().children('.nav__dropdown-link').addClass('nav__dropdown-link_dropdown');
</script>
|
Спасибо что помогаете!!!! Только вот без начала... Как обернуть эту функцию. Пожалуйста, голову дайте. Простите за наивность!!!
|
а.... просто страницу не обновил, теперь вижу... Спасибо большое!!!!
|
| Часовой пояс GMT +3, время: 12:02. |