0

I'm trying to read a grid in the following order: - left bottom - Left top - Center top - Right top - Right bottom

I have div blocks with the same class name ".block" which I can loop through and extract the content. But this happens in a random order. I would like to have the content in a string on the above specified order.

For example lets say we have the current situation: enter image description here

All blocks have the same classname. If I loop through the class, the result must be: 1-2-3-4-5-6-7

In this example I used numbers inside the blocks (which would be easy with ordering) but in fact its dynamic text whats inside the blocks so it could be "hi-demo-test-how-are-you-good" with "hi" being positioned on bottom left and "good" bottom right.

TTS
  • 47
  • 6
  • can you give me an example of class names of each blocks? – Ajith Dec 27 '19 at 14:22
  • They all have the same class name, for example: ".block" @Ajith – TTS Dec 27 '19 at 14:25
  • 1
    The best practice method would be to ensure that the `DOM` nodes are sorted correctly as the `DOM` reads left-to-right top-to-bottm. An alternative that would be counter-best-practice would be to fetch all elements containing the class, say `.block` (`document.getElementsByClassName`) and to use the x/y offset position (https://stackoverflow.com/questions/442404/retrieve-the-position-x-y-of-an-html-element) of the element in relation to the page in a loop to sort the elements. However, to avoid risk of doing some crazy homework, I won't be providing an example. – Matt Dec 27 '19 at 14:29
  • You could try providing an example, maybe it'll be a start which I can finish – TTS Dec 27 '19 at 23:22

1 Answers1

0

In the loop where you add the div’s give the same id with auto increment number like (id_1,id_2,...) and in the jquery or javascript run a for loop and append the number tot he id’s.this is what came into my mind, sure you can come up with more workarounds :)

Basil
  • 1,613
  • 12
  • 25
  • Well this would be easy indeed, but the thing is, the div blocks are created dynamically and an user can move the div blocks to his/her own likings within a grid. – TTS Dec 27 '19 at 16:44