Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #1 (permalink)  
Старый 16.04.2018, 17:09
Аспирант
Отправить личное сообщение для rafaello Посмотреть профиль Найти все сообщения от rafaello
 
Регистрация: 09.11.2012
Сообщений: 91

Добавить класс дочернему элементу
Ребята, выручайте пожалуйста.
Есть вложенное меню
<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" к ссылке с текстом РАСКРЫТИЕ ИНФОРМАЦИИ
Ответить с цитированием
  #2 (permalink)  
Старый 16.04.2018, 17:41
Аватар для j0hnik
Профессор
Отправить личное сообщение для j0hnik Посмотреть профиль Найти все сообщения от j0hnik
 
Регистрация: 01.12.2016
Сообщений: 3,649

[].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');
});
Ответить с цитированием
  #3 (permalink)  
Старый 16.04.2018, 17:46
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 26,837

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>
Ответить с цитированием
  #4 (permalink)  
Старый 16.04.2018, 17:47
Профессор
Отправить личное сообщение для Dilettante_Pro Посмотреть профиль Найти все сообщения от Dilettante_Pro
 
Регистрация: 27.11.2015
Сообщений: 2,899

Вариант - не обязательно рядом. В том же диве
<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>

Последний раз редактировалось Dilettante_Pro, 16.04.2018 в 17:54.
Ответить с цитированием
  #5 (permalink)  
Старый 16.04.2018, 17:56
Аспирант
Отправить личное сообщение для rafaello Посмотреть профиль Найти все сообщения от rafaello
 
Регистрация: 09.11.2012
Сообщений: 91

Спасибо что помогаете!!!! Только вот без начала... Как обернуть эту функцию. Пожалуйста, голову дайте. Простите за наивность!!!
Ответить с цитированием
  #6 (permalink)  
Старый 16.04.2018, 17:58
Аспирант
Отправить личное сообщение для rafaello Посмотреть профиль Найти все сообщения от rafaello
 
Регистрация: 09.11.2012
Сообщений: 91

а.... просто страницу не обновил, теперь вижу... Спасибо большое!!!!
Ответить с цитированием
Ответ



Опции темы Искать в теме
Искать в теме:

Расширенный поиск


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
Добавить / удалить класс кликом fabrique Общие вопросы Javascript 4 03.09.2014 03:43
как через javascript добавить класс элементу? LeeRoy Элементы интерфейса 1 12.06.2014 22:42
Добавить класс изображениям Kerovan Общие вопросы Javascript 13 21.08.2013 00:29
Как добавить класс к нужному элементу при наведении на определеные ссылки? crazygangster77 Events/DOM/Window 3 05.06.2013 01:19
Задать класс дочернему элементу Juli@ jQuery 12 06.09.2011 10:32