Question

I have a container with a specified width of 980px that contains inline-block elements. Each element has a width and height of 140px, which means that each line/row can contain 7 elements before they are pushed down to the next line/row.

<div id="container"><div id="ele1"></div><div id="ele2"></div><div id="ele3"></div><div id="ele4"></div><div id="ele5"></div><div id="ele6"></div><div id="ele7"></div><div id="ele8"></div><div id="ele9"></div><div id="ele10"></div><div id="ele11"></div><div id="ele12"></div><div id="ele13"></div><div id="ele14"></div></div>

Knowing the number of the element, how do I determine with JavaScript (not jQuery) what line/row and what column that element is in? I need to be able to do this for any number of elements, as the number is dynamic and not set by the script.

Answer 1

this might work:

column = Number(yourNumber) % 7
row = Math.floor(Number(yourNumber) / 7)

This supposes you start with 0 then the first element is (0, 0)