分组并显示相同类型的项目

Question

我有一个项目列表视图,这些项目将根据类别组合在一起并显示为框.

假设我有5个项目:

<div class="1"></div>
<div class="1"></div>
<div class="2"></div>
<div class="3"></div>
<div class="3"></div>

需要像这样的盒子来显示类似的项目.

一旦我们向ViewModel添加一个类为1的新项目,该框就需要将新项目添加到第一个框中.

任何人都可以帮我解决如何对具有相同类的项目进行分组,以及如何在具有相同类的项目上显示带有CSS的框？

Answer 1

您可以使用一些jQuery来使用包装器将具有匹配类名的所有元素包装起来:

var elems = $('div').map(function() {
    return $(this).attr('class');
});
$.unique(elems).each(function(i, el) {
    $('.'+el).wrapAll('<div class="wrapper"></div>');
});

然后,您可以将CSS应用于.wrapper类(或者根据需要将其命名).

这是Codepen示例.