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>，然后将其移至另一个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 } } });。

这是我到目前为止所做的，但我没有得到预期的结果。我过去在Excel中已经完成了这个，但是无法使用jQuery。

{{1}}

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>

我希望我没有误会你。

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

1 个答案: