javascript - 根据数据属性将列表项分组为子列表

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>

希望我没有误会你。