什么是jQuery的基于其数据属性包装元素的最佳方式是什么？

-1

<ul> 
    <li data-conference="Conference1" >Spain</li> 
    <li data-conference="Conference1" >France</li> 
    <li data-conference="Conference1" >Germany</li> 
    <li data-conference="Conference1" >Italy</li> 
    <li data-conference="Conference2" >Austria</li> 
    <li data-conference="Conference2" >Poland</li> 
    <li data-conference="Conference3" >Russia</li> 
    <li data-conference="Conference3" >USA</li> 
    <li data-conference="Conference3" >China</li> 
</ul>

什么是最好的方式（使用jQuery），综合考虑性能，重新组合成这本：

<ul> 
    <li>Spain</li> 
    <li>France</li> 
    <li>Germany</li> 
    <li>Italy</li> 
</ul> 
<ul> 
    <li>Austria</li> 
    <li>Poland</li> 
</ul> 
<ul> 
    <li>Russia</li> 
    <li>USA</li> 
    <li>China</li> 
</ul>

谢谢！

来源

2012-05-06 Jonas

你有什么尝试？（除[this]（http://stackoverflow.com/q/10470524/601179）...）您希望我们决定什么选项？ – gdoron

如果你考虑性能，你是否也考虑过vanilla js解决方案？与香草js相比，jQuery是一个性能杀手。 –

将多个ul分开的逻辑是什么？ –

我认为整个问题（按属性组元素）是很好的，你刚才应该把更多的精力放在试图自己解决问题。

不管怎样，按属性对元素进行分组非常简单。您可以创建一个attribute value -> [element, ...]地图，可以用一个对象来完成：

var groups = {}; 

$('li[data-city]').each(function() { 
    var attr = $(this).attr('data-city'), 
     group = groups[attr]; 
    if(!group) { 
     group = groups[attr] = []; 
    } 
    group.push(this); 
});

现在你有DOM元素列表的集合。您可以遍历集合并相应地创建HTML列表。

例如：

for(var group in groups) { 
    var $list = $('<ul />'); 
    $list.append(groups[group]); 
    // now append $list somewhere 
}

看一看Working with Objects^[MDN]，以获取有关如何处理对象的详细信息。

只要您引用了元素，例如将其作为NodeList，就可以在不使用jQuery的情况下做到这一点。您可以使用“正常”for循环来迭代该列表，而不是使用.each循环来迭代该列表。

来源

2012-05-06 12:45:41

使用data属性作为对象属性对它们进行排序，然后遍历它们以构造新的html。这应该让你开始：

var list = {}; 
// for each item 
list[item.data('city')] = item.text(); 

// for each property of list 
var ul = $('<ul>'); 
// for each listItem in current list 
var li = $('<li>').text(listItem); 
ul.append(li);

来源

2012-05-06 12:42:28 jbabey

将擦除数据。 –

@ParthThakkar他所需的输出在列表项上没有数据属性。 – jbabey

目标只是根据数据属性对项目进行分组。没有特定的顺序需要。 – Jonas

除非你在这些名单中有疯狂的城市数量，否则我不会担心表现。我将考虑的唯一性能考虑是通过尽量减少对DOM的写入来避免重绘/重排。我认为在这个用例中代码的清晰性要重要得多。

这就是说我会实现这样的东西 - http://jsfiddle.net/XWufy/。

来源

2012-05-06 12:53:02

试试这个：

var list = []; 
var $div = $('#my_container_div'); 

$('li[data-city]').each(function() { 
    var $this = $(this), data = $this.attr('data-city'); 
    list[ data ] = list[ data ] || []; 
    list[ data ].push($this.text()); 
}); 

for(var data in list) { 
    var $ul = $div.append('<ul/>'); 
    for(var li in list[data]) { 
     $ul.append('<li>' + list[data][li] + '</li>'); 
    } 
}

来源

2012-05-06 12:57:16

'list [data] [] = $ this.text（）;'只适用于PHP。 –

哦！谁说的？自己检查一下。有用。 –

'var a = []; a [] ='foo';'抛出*“SyntaxError：意外的标记]”*为我在Chrome中。你能提供一个可行的例子吗？ –

试试这个：

<ul id="first"></ul>// you can create the ul tags by using JavaScript 

$("li").each(function(){ 
     data = $(this).attr("data"); 
     if (data == "Conference1") { 
     txt = $(this).text(); 
     $("<li>" + txt + "</li>").appendTo("ul#first"); 
     } 
})

来源

2012-05-06 12:58:25 undefined

在这里你去：

(function() { 
    var $list = $('#list'); 
    var lists = {}; 
    var $newLists = $(); 

    $list.children().each(function() { 
     var city = $(this).data('city'); 
     if (!lists[ city ]) lists[ city ] = []; 
     lists[ city ].push(this); 
    }); 

    $.each(lists, function (city, items) { 
     var $newList = $('<ul />').append(items); 
     $newLists = $newLists.add($newList); 
    }); 

    $list.replaceWith($newLists);    
}());

现场演示：http://jsfiddle.net/rjt9W/6/

顺便说一句，代码假定列表的ID为"list"。替换此行中的选择器

var $list = $(...);

以便正确选择您的UL元素。

来源

2012-05-06 13:08:47

什么是jQuery的基于其数据属性包装元素的最佳方式是什么？

回答

相关问题