Javascript-форум - Присвоение элементу класс предыдущего элемента

Javascript-форум (https://javascript.ru/forum/)

- jQuery (https://javascript.ru/forum/jquery/)

- - Присвоение элементу класс предыдущего элемента (https://javascript.ru/forum/jquery/76086-prisvoenie-ehlementu-klass-predydushhego-ehlementa.html)

Присвоение элементу класс предыдущего элемента

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

<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").
Вопрос: как это провернуть ?
Буду благодарен за любую помощь или рекомендацию.

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

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

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

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>

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

<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", чтобы сохранять одинаковую цветовую гамму.

Цитата:

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

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

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

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

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

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