I am facing a challenge with elements positioned absolutely on a web page.
My goal is to iterate over these elements and identify the one with the highest top value.
I attempted two different approaches:
const elems = document.querySelectorAll('.index-posts > li');
const newElems1 = [...elems].filter(item => Math.max(parseInt(item?.style?.top)));
const newElems2 = Math.max([...elems].map(item => parseInt(item?.style?.top?.split('px')[0]));
I believe the first method should work, but I may not be implementing Math.max correctly. It seems this approach returns all items because it's calculating the max height for each item.
I came across a helpful post on Stack Overflow that inspired my second variable creation: Finding the max value of a property in an array of objects
const elems = document.querySelectorAll('.index-posts > li');
// const newElems = [...elems].filter(item => Math.max(parseInt(item?.style?.top)));
const newElems = Math.max([...elems].map(item => parseInt(item.style.top.split('px')[0]));
console.log(newElems);<ul class="index-posts row"><li id="affirmation" style="top: 3px; left: 0%;">
// Some content here
</li><li id="effort" style="top: 261px;">
// More content here
</li><li id="gods_and_monsters" style="top: 693px; left: 64%;">
// Additional content here
</li>
/* more list items */
</ul>If you can provide guidance on how to solve this issue, I would greatly appreciate it.