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

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 example。

Answer 2

好吧，如果你可以在div中添加一个额外的元素，那么你总是可以用this之类的东西伪造它。也许可以使用psuedo元素实现类似的效果。不要忘记你也可以根据你的需要创建borders using drop shadows：）

<强> CSS

* {
  font-size: 0;
  box-sizing: border-box;
}
[class^="class"] {
  display: inline-block;
  width: 20%;
  background: red;
  padding: 10px;
}

.inner {
  background: blue;
  font-size: 16px;
}

.class1 {
  background: green;
}

.class3 {
  background: purple;
}

<强> HTML

<div class="class1"><div class="inner">1</div></div>
<div class="class1"><div class="inner">1</div></div>
<div class="class2"><div class="inner">2</div></div>
<div class="class3"><div class="inner">3</div></div>
<div class="class3"><div class="inner">3</div></div>

Codepen