Changing list items height based on data-attribute using plain javascript

JavaScript
1

Hi all, so i need to make lis, with the same data-attribute, the same height as the tallest one of them using plain javascript and no tables, however i’m struggling with this task, mainly getting lis with the same data attribute. Here’s the code: https://codepen.io/benasl/pen/ooLrON?editors=1010

2

Hi @benasleng, so what have you tried so far? There’s no JS in that pen…

3

I’ve tried looping through all the list items, however what i don’t know is how to get elements that have the same data attribute

4

It seems that you want to emulate a table. Inhowfar are the data attributes really relevant in contrast to just counting the list items?

1 Like
5

You’d first have to get all elements with a data-item attribute, and .reduce() the result to an array which holds the elements sorted by the data-item value… like e.g.

// Get all elements that have a data-item attribute
const els = document.querySelectorAll('[data-item]')

// Sort those elements in an array which holds
// arrays of all elements with the same data-item
// value
const itemList = Array.from(els)
  .reduce((res, el) => {
    const index = el.dataset.item
    
    // Push he current element at the
    // corresponding index in the array
    res[index] = res[index] || []
    res[index].push(el)
    
    return res
  }, [])

The result would be something like

[
  [item, item, item],
  [item, item, item],
  [item, item, item]
]

However note that setting the element heights depending on that would also require a (rather expensive) resize handler to work properly. Maybe you’d better look into CSS grids instead, or even just flex with appropriate adjustments to the markup.

PS: With “what have you tried” I actually meant to show us the code you’re struggling with. ;-)

6

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.