CODEWITHSUNDEEP
javascriptjquerycss
Harsha pps
Harsha pps

Reputation: 2208

Group and show items of same type

I have a listView of items and these items are to be grouped together based on a class and shown with boxes.

Suppose I have 5 items with:

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

enter image description here

Need boxes just like this to show the similar items.

Once we add a new item to the ViewModel with a class of 1, the box needs to add the new item to the first box.

Can anyone help me out in how to group the items which have same class and how do we show a box with CSS on the items which have same class?

Upvotes: 2

Views: 117

Answers (2)

wickywills
wickywills

Reputation: 4204

Well if you can add an extra element inside the divs, then you could always fake it with something like this. Could probably achieve a similar effect using psuedo elements as well. Don't forget you can also create borders using drop shadows, depending on what you need :)

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

Upvotes: 0

delinear
delinear

Reputation: 2795

You can use a bit of jQuery to wrap all elements with matching class names with a wrapper:

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

You can then just apply your CSS to the .wrapper class (or name it whatever you want).

Here is a Codepen example.

Upvotes: 6

Related Questions