Arrange and display similar objects together

Question

Arrange and display similar objects together

I have a list of items in a listView that need to be visually grouped based on their class, displayed within boxes.

For example, I have 5 items with the following classes:

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

https://i.stack.imgur.com/Zru8N.png

I want to display boxes around items with similar classes like the image above.

If a new item is added with class "1" to the ViewModel, it should be placed inside the existing box for items with class "1".

Can someone provide guidance on how to group items by class and style them with CSS using boxes?

javascript jquery css

Answer 1

Answer №1

To group together elements with similar class names using jQuery, you can create a wrapper around them:

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

You can then easily style the wrapper class with your desired CSS.

Check out this Codepen demo for an example.

Answer 2

To group together elements with similar class names using jQuery, you can create a wrapper around them:

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

You can then easily style the wrapper class with your desired CSS.

Check out this Codepen demo for an example.

Answer 3

Answer №2

If you need to add an additional element within the divs, there is a workaround available. You can try replicating the desired effect using resources like this. It's also possible to achieve a similar outcome by utilizing pseudo elements. Another option to consider is creating borders using drop shadows as outlined here if necessary :)

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

Answer 4

If you need to add an additional element within the divs, there is a workaround available. You can try replicating the desired effect using resources like this. It's also possible to achieve a similar outcome by utilizing pseudo elements. Another option to consider is creating borders using drop shadows as outlined here if necessary :)

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

Arrange and display similar objects together

Answer №1

Answer №2

Similar questions

Show information from the console logger

Building intricate hierarchical menus with Material-UI 4.9

Tallying the number of words delimited by a comma

Using React.js to add MongoDB documents into the database

What is the best approach for sending mapbox coordinates to a higher-level class in a react application?

How to Display HTML Content from a WYSIWYG Editor in ASP.NET Webforms without Master Page Bootstrap Styles Interfering

What is the method to display a group label using ng-table?

Tips on setting up the table with php and javascript

Sending various values from ASP.NET to a javascript function

Employing negative margin to connect div1 to the left side of div2

JavaScript image sorting function fails to sort multiple ID elements that match

Implement a grid layout for columns within the profile section

Selecting checkboxes based on a delimited string containing specific values can be done using Javascript

Can WebSocket messages be encoded?

Troubleshoot: Border problem within nested columns in Bootstrap

transmitting an array from JavaScript to PHP

The jQuery focusout event is triggered on a form element, even if a child element is clicked within the form

Swapping out the main view for the partial view

Displaying customized local JSON information in a Tabulator Table

Difficulty Encountered when Using Colorbox in Internet Explorer (all iterations)