根据数据属性将列表项目分组到子列表中 [英] Group list-items into sub-lists based on a data attribute

问题描述

我想将一个< ul> 的< li> 追加到另一个< ul> 即时创建。我想根据它们的 data-group 属性将列表项分组到新的子列表中。

 < ul id =sortable1> 
< li data-group =A>测试< / 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）; 
 //抓住当前li 
 var str = $（this）.text（ ）; 
 $ b $ if（idx> 0）{
 // append li 
 str + = str; 
 if（$（this）.data（group ）！= $（this）.prev（）。data（group））{
 //我应该得到test和test1。
 //但alert只给test1 test1。
 
 alert（str）; 
 //需要分组
 //用组
} 
} 
}）; 
  

解决方案

b
$ b

  $（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（ 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>测试< / 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>  

我希望我没有误解你。

I want to append the <li> from one <ul> to another <ul> that's created on the fly. I want to group the list-items into new sub-lists based on their data-group attribute.

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

Basically I'm trying to loop through this list and grap all <li> from each group, and then move it to another <ul>.

This is what I have so far, but I'm not getting the expected results. I have done this in Excel in the past but can't get it to work with 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
        }
    }
});

解决方案

How about something like this:

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

I hope I didn't misunderstand you.

这篇关于根据数据属性将列表项目分组到子列表中的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！