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

Question

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

4

我想将一个用代码创建的

<ul> 中的 <li> 添加到另一个 <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
        }
    }
});

- causita

你只是想将内部的 li 元素复制到另一个 ul 中吗？还是你想要移动它们？ - Dimitar Dimitrov

您想同时移动多个组还是一次只移动一个？如果是后者，那么首先只选择该组中的元素，在这种情况下使用属性等于选择器。 - CBroe

@DimitarDimitrov，理想情况下我想要移动它们。 - causita

1个回答

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Dimitar Dimitrov · Accepted Answer

这个怎么样：

如下：

$(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>

我希望我没有误解你。