javascript - 分组并显示相同类型的元素

Question

我有一个元素的 ListView ，这些元素将根据类别组合在一起并用框显示。

假设我有 5 件元素:

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

需要像这样的框来显示相似的元素。

一旦我们将一个新元素添加到类为 1 的 ViewModel，盒子就需要将新元素添加到第一个盒子。

谁能帮我解决如何对具有相同类别的元素进行分组以及我们如何在具有相同类别的元素上显示带有 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 example .