根據數據屬性將列表項添加到子列表中

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>

我希望我沒有誤解你。