1

Как правильно в таком коде объединить содержимое по кастомному атрибуту?

$(".wrapper").each(function(i) {
  let accName = $('.wrapper[acc-name]').eq(i).attr('acc-name');
  let content = $(".wrapper span").eq(i).html();

  if ($('.new-wrapper').length > 0) { //Проверяем существует ли элемент
    $('.new-wrapper h2').each(function() { //Для каждого существующего элемента
      if ($(this).text() == accName) { //Сравниваем заголовок
        $('.new-wrapper').append('<div class="content">' + content + '</div>') //Если заголовок одинаковы - добвляем контент
      } else { //Если заголовок не одинаковый - создаем новый элемент
        $("#block").append('<div class="new-wrapper"><h2>' + accName + '</h2><div class="content">' + content + '</div></div>');
      }
    });

  } else { //Если элемент не существует
    $("#block").append('<div class="new-wrapper"><h2>' + accName + '</h2><div class="content">' + content + '</div></div> ');
  }
});
.wrapper {
  display: none;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="wrapper" acc-name="Wrapper one"><span>Text 1</span></div>
<div class="wrapper" acc-name="Wrapper one"><span>Text 2</span></div>
<div class="wrapper" acc-name="Wrapper two"><span>Text 3</span></div>
<div class="wrapper" acc-name="Wrapper two"><span>Text 4</span></div>
<div class="wrapper" acc-name="Wrapper two"><span>Text 5</span></div>

<div id="block"></div>

Должно получиться

<div class="new-wrapper">
<h2>Wrapper one</h2>
<div class="content">Text 1</div>
<div class="content">Text 2</div>
</div>

<div class="new-wrapper">
<h2>Wrapper two</h2>
<div class="content">Text 3</div>
<div class="content">Text 4</div>
<div class="content">Text 5</div>
</div>

1 ответ 1

0

let lookup = {};
$(".wrapper").each(function() {
  let accName = $(this).attr('acc-name');
  let newW = lookup[accName];
  if (!newW) {
    newW = $('<div></div>').addClass("new-wrapper");
    $('<h2></h2>').text(accName).appendTo(newW);
    $('#block').append(newW);
    lookup[accName] = newW;
  }
  $('<div></div>').addClass('content').text($(this).find('span').text()).appendTo(newW);
});
.wrapper {
  display: none;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="wrapper" acc-name="Wrapper one"><span>Text 1</span></div>
<div class="wrapper" acc-name="Wrapper one"><span>Text 2</span></div>
<div class="wrapper" acc-name="Wrapper two"><span>Text 3</span></div>
<div class="wrapper" acc-name="Wrapper two"><span>Text 4</span></div>
<div class="wrapper" acc-name="Wrapper two"><span>Text 5</span></div>

<div id="block"></div>

2
  • Благодарю за помощь! Все отлично работает!
    – Yfe
    Commented 2 июн. 2021 в 13:20
  • @Yfe Пожалуйста. Успехов.
    – user176262
    Commented 2 июн. 2021 в 13:25

Ваш ответ

Нажимая «Отправить ответ», вы соглашаетесь с условиями пользования и подтверждаете, что прочитали политику конфиденциальности.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.