Форум

Daillyn · #1 (**permalink**) 03.12.2018, 17:31

Здравствуйте, нужна помощь.
Есть такая структура:

<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

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

<dt class="box_first box__open" data-cls="box_first">

Daillyn · #3 (**permalink**) 03.12.2018, 18:04

Да, можно вносить любые изменения, главное - результат.

рони · #4 (**permalink**) 03.12.2018, 18:14

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>

Daillyn · #5 (**permalink**) 03.12.2018, 18:44

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

<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

Сообщение от Daillyn

Суть в том, что у каждого блока первый класс - разный.

в коде выше это ничего не меняет, пишите нужные классы в data-cls

рони · #7 (**permalink**) 03.12.2018, 19:30

Daillyn,
для тех кто любит погорячее ... без data

$(function() {
    $( "dt" ).each(function() {
        $(this).next().addClass(this.className).removeClass("box__open")
    	});
});

Daillyn · #8 (**permalink**) 03.12.2018, 19:30

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

Форум

Справочник

Discord чат

Курсы javascript