Javascript.RU

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

Присвоение элементу класс предыдущего элемента
Здравствуйте, нужна помощь.
Есть такая структура:
<dt class="box_first box__open">
            <img src="" alt="">
            <h2>text</h2>
</dt>
    <dd class="box__hide"><p class="hidden_text">text</p></dd>

Таких блоков несколько (5).
А задача такова: присвоить каждому элементу "dd" первый класс элемента "dt" (в данном случаи - "box_first").
Вопрос: как это провернуть ?
Буду благодарен за любую помощь или рекомендацию.
Ответить с цитированием
  #2 (permalink)  
Старый 03.12.2018, 17:45
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 33,064

Daillyn,
можно так сделать?

<dt class="box_first box__open" data-cls="box_first">
Ответить с цитированием
  #3 (permalink)  
Старый 03.12.2018, 18:04
Новичок на форуме
Отправить личное сообщение для Daillyn Посмотреть профиль Найти все сообщения от Daillyn
 
Регистрация: 03.12.2018
Сообщений: 6

Да, можно вносить любые изменения, главное - результат.
Ответить с цитированием
  #4 (permalink)  
Старый 03.12.2018, 18:14
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 33,064

Daillyn,
<!DOCTYPE html>

<html>
<head>
  <title>Untitled</title>
  <meta charset="utf-8">
  <style type="text/css">
  dd.box_first{
      background-color: #FF0000;
  }

  </style>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>

  <script>
$(function() {
    $( "[data-cls]" ).each(function() {
        var el = $(this), cls = el.data("cls");
        el.next().addClass(cls)
    	});
});
  </script>
</head>

<body>
<dt class="box_first box__open" data-cls="box_first">
            <img src="" alt="">
            <h2>text</h2>
</dt>
    <dd class="box__hide"><p class="hidden_text">text</p></dd>

<dt class="box_first box__open" data-cls="box_first">
            <img src="" alt="">
            <h2>text</h2>
</dt>
    <dd class="box__hide"><p class="hidden_text">text</p></dd>

</body>
</html>
Ответить с цитированием
  #5 (permalink)  
Старый 03.12.2018, 18:44
Новичок на форуме
Отправить личное сообщение для Daillyn Посмотреть профиль Найти все сообщения от Daillyn
 
Регистрация: 03.12.2018
Сообщений: 6

Спасибо огромное.
Но не совсем так, я все же не точно поставил задачу, прошу прощения.
Суть в том, что у каждого блока первый класс - разный.
То есть выглядит это так:

<dt class="box_first box__open" data-cls="box_first">
            <img src="" alt="">
            <h2>text</h2>
</dt>
<dd class="box__hide"><p class="hidden_text">text</p></dd>

<dt class="box_second box__open" data-cls="box_first">
            <img src="" alt="">
            <h2>text</h2>
</dt>
    <dd class="box__hide"><p class="hidden_text">text</p></dd>

<dt class="box_third box__open" data-cls="box_first">
            <img src="" alt="">
            <h2>text</h2>
</dt>
    <dd class="box__hide"><p class="hidden_text">text</p></dd>


Моя задача: присвоить каждому "dd" стили предыдущего "dt".
У каждого из 'dt' в классе "box_(firsr, second, third и тд)" - прописаны: background-color и color, и их надо мне перенять для "dd", чтобы сохранять одинаковую цветовую гамму.
Ответить с цитированием
  #6 (permalink)  
Старый 03.12.2018, 19:20
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 33,064

Сообщение от Daillyn
Суть в том, что у каждого блока первый класс - разный.
в коде выше это ничего не меняет, пишите нужные классы в data-cls
Ответить с цитированием
  #7 (permalink)  
Старый 03.12.2018, 19:30
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 33,064

Daillyn,
для тех кто любит погорячее ... без data
$(function() {
    $( "dt" ).each(function() {
        $(this).next().addClass(this.className).removeClass("box__open")
    	});
});
Ответить с цитированием
  #8 (permalink)  
Старый 03.12.2018, 19:30
Новичок на форуме
Отправить личное сообщение для Daillyn Посмотреть профиль Найти все сообщения от Daillyn
 
Регистрация: 03.12.2018
Сообщений: 6

Спасибо огромное, все работает )
Ответить с цитированием
Ответ



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

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


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
чтение url(document.location) исходя из этого присвоение элементу класс newnext Events/DOM/Window 3 03.11.2018 11:03
Изменить класс элемента в зависимости от разрешения экрана funfot (X)HTML/CSS 1 19.09.2014 20:15
как через javascript добавить класс элементу? LeeRoy Элементы интерфейса 1 12.06.2014 23:42
Изменить класс родительского элемента STyLe Общие вопросы Javascript 1 29.05.2014 20:21
Присвоение класса элементу с заранее неизвестным ID why.not? Events/DOM/Window 3 01.03.2010 04:47