Как правильно в таком коде объединить содержимое по кастомному атрибуту?
$(".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>