根据数据属性将列表项添加到子列表中

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>

我希望我没有误解你。