Evening out an unordered list by column

Question

I have an unordered list:

<div class="col-md-6">
    
  <ul class="list-unstyled">

    {% for child in Post(list.page).children %}

      <li class="ott-item pb-3"><a href="{{ child.link }}">{{ child.title }}</a></li>

    {% endfor %}

  </ul>

</div>

They are displayed 0-9 and then AZ but I want to count and then split them onto a new col-md-6 so they do not belong to one ul, as it makes the page way too long and creates too much white space.

Can anyone point me in the right direction with some JS?

I'm trying to get the output like this as an example if there were four list items:

<div class="col-md-6">

  <ul class="list-unstyled">

      <li class="ott-item pb-3"><a href="{{ child.link }}">Item One</a</li>
      <li class="ott-item pb-3"><a href="{{ child.link }}">Item Two</a</li>

  </ul>

</div>
<div class="col-md-6">

  <ul class="list-unstyled">

      <li class="ott-item pb-3"><a href="{{ child.link }}">Item Three</a</li>
      <li class="ott-item pb-3"><a href="{{ child.link }}">Item Four</a</li>

  </ul>

</div>

Answer 1

It sounds like you want much of the same logic that is used in pagination. I would search around for JS pagination tutorials and extract out the logic you want. The general path I would tell you to go down is to write a function that gets the total number of entries that you pull in, calculate AllData / 2 (or whatever number of <li> entries you want per generated <ul> ), and round up with Math.floor() for any remaining entries.

From there you can do something like

     const startIndex = currentRoundOfDataBeingProcessed * dataLimit - dataLimit;
     const endIndex = startIndex + dataLimit;
     return data.slice(startIndex, endIndex);

and for each time you slice the data, you generate another <div class='col-md-6'> block

The main takeaway is to define your limits based on your total entries and incrementally Data.slice() your entries as you work through your whole data object.