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

Exploring ways to store session data in Next.js 13 with Supabase for seamless persistence

Is there a way to incorporate pseudo-dynamic css into my projects?

Error: The text value is not defined

Ensure that the HTML link is valid and authenticated using SESSIONS

AngularJS directive error: Incorrect function invoked

Send two arguments to a personalized validation function using express-validation

Begin the initial function again once the second function has been completed

Utilize React-markdown to interpret subscript text in markdown format

Troubleshooting issue with Next.JS Redux dispatch functionality inside getStaticProps() not functioning as

Here is a list of selections that can be easily removed and have a child selection added

Using HTML, CSS, and jQuery to create a master-detail feature

"Typescript: Unraveling the Depths of Nested

Accepting multiple file inputs in a form without using a selector, but instead utilizing the 'this' keyword or finding an alternative approach

Multer is experiencing difficulties in uploading files, yet it is not displaying any error messages

Having trouble getting the Html onload function to work in Google Sheets App Script?

using database URL as an AJAX parameter

Complete the JQuery code by closing the div and ul tags, then proceed to open a

The functionality of a website's design acts as a safeguard against unauthorized data transfers

Refreshing a web page in Internet Explorer can cause the HTTP Header content to be altered

Fetching content-type in React code locally executed