javascript — jQuery группирует подобные предметы с заголовками

jQuery группировать похожие предметы с заголовками

Я пытаюсь сгруппировать похожие элементы на основе данных attr, при группировке должны отображаться два заголовка, извлеченные из данных attr каждого элемента.

До сих пор я могу получить один заголовок (имя группы), но не могу добавить второй (имя типа).

Любая помощь могла бы быть полезна.

Пример: Попытка достичь следующего

 GROUP TYPE item 1 item 2 item 3 GROUP TYPE item 1 item 2 item 3 
 jQuery(function ($) { var $list = $('#group'); var lists = {}; var $newLists = $(); $list.children().each( function () { var group = $( this ).data('group'); if (!lists[group]) lists[group] = []; lists[group].push(this); }); $.each( lists, function (group, items) { var $newList = $('{amp}lt;div class="row"/{amp}gt;').append(items).prepend("{amp}lt;h3{amp}gt;"  group  "{amp}lt;/h3{amp}gt;"); $newLists = $newLists.add($newList); }); $list.replaceWith($newLists); }); 
 {amp}lt;script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"{amp}gt;{amp}lt;/script{amp}gt; {amp}lt;div id="group"{amp}gt; {amp}lt;div data-group="GROUP A" data-type="Construction"{amp}gt; {amp}lt;div{amp}gt;item 1{amp}lt;/div{amp}gt; {amp}lt;/div{amp}gt; {amp}lt;div data-group="GROUP A" data-type="Construction"{amp}gt; {amp}lt;div{amp}gt;item 2{amp}lt;/div{amp}gt; {amp}lt;/div{amp}gt; {amp}lt;div data-group="GROUP A" data-type="Construction"{amp}gt; {amp}lt;div{amp}gt;item 3{amp}lt;/div{amp}gt; {amp}lt;/div{amp}gt; {amp}lt;div data-group="GROUP A" data-type="Construction"{amp}gt; {amp}lt;div{amp}gt;item 4{amp}lt;/div{amp}gt; {amp}lt;/div{amp}gt; {amp}lt;div data-group="GROUP A" data-type="Construction"{amp}gt; {amp}lt;div{amp}gt;item 5{amp}lt;/div{amp}gt; {amp}lt;/div{amp}gt; {amp}lt;div data-group="GROUP B" data-type="Finance"{amp}gt; {amp}lt;div{amp}gt;item 1{amp}lt;/div{amp}gt; {amp}lt;/div{amp}gt; {amp}lt;div data-group="GROUP B" data-type="Finance"{amp}gt; {amp}lt;div{amp}gt;item 2{amp}lt;/div{amp}gt; {amp}lt;/div{amp}gt; {amp}lt;div data-group="GROUP B" data-type="Finance"{amp}gt; {amp}lt;div{amp}gt;item 3{amp}lt;/div{amp}gt; {amp}lt;/div{amp}gt; {amp}lt;div data-group="GROUP B" data-type="Finance"{amp}gt; {amp}lt;div{amp}gt;item 4{amp}lt;/div{amp}gt; {amp}lt;/div{amp}gt; {amp}lt;div data-group="GROUP B" data-type="Finance"{amp}gt; {amp}lt;div{amp}gt;item 5{amp}lt;/div{amp}gt; {amp}lt;/div{amp}gt; {amp}lt;/div{amp}gt; 
Понравилась статья? Поделиться с друзьями:
JavaScript & TypeScript
Adblock
detector