我想追加< li>从一个< ul>到另一个< ul>这是在飞行中创建的.我想根据数据组属性将列表项分组到新的子列表中.
<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 } } });
解决方法
这样的事情怎么样:
$(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>
我希望我没有误会你.
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。