Question

我有一个像

这样的清单

<ul>
<li> hgh55jjj </li>
<li> abc99xyz </li>
<li> hgf88hjk </li>
<li> ........ </li>
<li> ........ </li>
<li> def99bnb </li>
<li> gjj77hkj </li>
<li> hgh55fhj </li>
</ul>

我希望根据文本中的两个数字将其格式化为分组列表，以便所有99个项目组合在一起。而且我还想要一个可以通过群组浏览的导航栏。我需要在列表项旁边的复选框，但我相信可以在不混合此部分的情况下完成。

Answer 1

我会帮你开始，但我会把你的导航菜单留给你首先，这是获取数字的简单方法（您可以根据您的实际数据以其他方式执行此操作）：

function getKey(fullText){
    return fullText.match(/\d\d/);
}

接下来，这段代码（当然是在document.ready中）接受<li> s，并根据键将它们放在一个关联的数组中：

var items = $('li');
var groups = [];
items.each(function(){
    var li = $(this);
    var g = 'List' + getKey(li.text());
    if(!groups[g])
      groups[g] = [];
    groups[g].push(li);
});

最后，对于每个群组，我们使用<ul>创建自己的name=id=List99（这将在您构建导航菜单时有所帮助）：

for(group in groups){
    var ul = $('<ul />').attr('id', group).attr('name', group);
    var lis = groups[group];
    for(i = 0;i<lis.length;i++){
        ul.append(lis[i]);
    }
    ul.appendTo('body');
}

现在，这可能不是最佳方式，但它应该是一个好的开始你可以在这里看到它：http://jsbin.com/inubi3，
并在此处使用代码：http://jsbin.com/inubi3/edit

列表项的高级分组 - Jquery

1 个答案: