同じタイプのアイテムをグループ化して表示する

Question

アイテムのリストビューがあり、これらのアイテムはクラスに基づいてグループ化され、ボックスで表示されます。

は私が持つ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のビットを使用することができます（あなたが好きか、名前を）あなたはその後、ちょうど.wrapperクラスにあなたのCSSを適用することができ

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

。

ここにはCodepen exampleがあります。

Answer 2

div内に余分な要素を追加できれば、いつでもthisのようなもので偽造することができます。擬似要素を使っても同様の効果が得られるはずです。何が必要に応じて、あなたも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