Элементы списка групп в под списках на основе атрибута данных

Question

Я хочу добавить <li> от одного <ul> к другому <ul>, который создан на лету. Я хочу сгруппировать элементы списка в новые под-списки на основе их атрибута data-group.

<ul id="sortable1"> 
    <li data-group="A">test</li> 
    <li data-group="A">test1</li> 
    <li data-group="B">test2</li> 
    <li data-group="B">test3</li> 
    <li data-group="C">test4</li> 
</ul> 

В основном я пытаюсь Переберите в этом списке и грейферы все <li> из каждой группы, а затем переместить его в другую <ul>.

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

var listItems = $("#sortable1").children("li"); 
listItems.each(function (idx, li) { 
    var product = $(li); 
    //grab current li 
    var str = $(this).text(); 

    if (idx > 0) { 
     //append li 
     str += str; 
     if ($(this).data("group") != $(this).prev().data("group")) { 
      //I should be getting test and test1. 
      //but alert is only giving test1 test1. 

      alert(str); 
      //need to break into groups 
      //do something with groups 
     } 
    } 
}); 

Answer 1

Как о чем-то вроде этого:

$(function() { 
 
    var sortable = $("#sortable1"), 
 
     content = $("#content"); 
 

 
    var groups = []; 
 
    sortable.find("li").each(function() { 
 
     var group = $(this).data("group"); 
 
     if($.inArray(group, groups) === -1) { 
 
      groups.push(group); 
 
     } 
 
    }); 
 
    
 
    groups.forEach(function(group) { 
 
     var liElements = sortable.find("li[data-group='" + group + "']"), 
 
      groupUl = $("<ul>").append(liElements); 
 
     content.append(groupUl); 
 
    }); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<ul id="sortable1"> 
 
    <li data-group="A">test</li> 
 
    <li data-group="A">test1</li> 
 
    <li data-group="B">test2</li> 
 
    <li data-group="B">test3</li> 
 
    <li data-group="C">test4</li> 
 
</ul> 
 

 
<div id="content">  
 
</div>

Я надеюсь, что я не понял вас.