列表项的高级分组 - Jquery

发布于 2024-08-10 00:17:59 字数 420 浏览 3 评论 0原文

我有一个列表，

<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 个项目组合在一起。我还想要一个可以浏览组的导航栏。我需要列表项旁边的复选框，但我相信这可以在不混合这部分的情况下完成。

原文

I have a list like

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

I want this to be formatted to a grouped list based on the two digits inside the text in such a way that all 99 items come together. And I also want a nav bar which will browse thru the groups. I need check box beside the list items, but I believe that could be done without mixing this part with.

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

合约呢 2024-08-17 00:17:59

我将帮助您开始，但我将给您留下导航菜单。
首先，这是获取数字的简单方法（您可以根据实际数据以另一种方式执行此操作）：

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

接下来，此代码（当然在 document.ready 中）采用

< /code>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);
});

最后，对于每个组，我们创建它自己的

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

I'll get you started, but I'm leaving you the navigation menu.
First, here's an easy way to get the number (you can do it in another way, based on your real data):

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

next, this code (in document.ready, of course), takes the <li>s, and places them in an associated array, based on the key:

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);
});

Finally, for every group we create it's own <ul>, with name=id=List99 (this will help when you build the navigation menu):

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');
}

Now, this may not be the best way of doing it, but it should be a good start.
You can see it in action here: http://jsbin.com/inubi3 ,
and play with the code here: http://jsbin.com/inubi3/edit

回复收藏 0 原文

~没有更多了~