CODEWITHSUNDEEP
javascriptjquery
William Cunningham
William Cunningham

Reputation: 583

Dynamic list break into two UL

I'm not very knowledgeable when it comes to JS/jQuery and could use a little help understanding what I need to do.

I am populating a modal when a link is clicked. When the link is clicked a UL is being created from a data attribute. The issue I am trying to solve is that when the link is clicked it is creating just one UL and I need it to be broken into two UL's. Here is a working codepen: https://codepen.io/west4me/pen/BGVgPy. The link to click is "View Regions".

I believe I need to break it into two around here:

"</h5></div><ul class='regionList'>" +
        regionLis.join("") +
        "</ul>"

If you could point me in the right direction I would appreciate it.

Upvotes: 0

Views: 71

Answers (1)

Andrew L
Andrew L

Reputation: 5486

You can use splice() to split the array in half. For example

var firstHalf = regionLis.splice(0, Math.ceil(regionLis.length / 2));

This will make firstHalf contain the first half of the regionLis and the regionLis variable will now hold the second half.

then, the .append() for your modal will look like

.append(
  "<div class='d-block'><h5 class='text-weight-bold'>" +
    staffName +
    "</h5></div><div class='d-block'><h5 class='font-weight-light'>" +
    staffTitle +
    "</h5></div><div class='ulContainer'><ul class='regionList'>" +
    firstHalf.join("") +
    "</ul></div>" +
   "<div class='ulContainer'> <ul class='regionList'>" +
    regionLis.join("") +
    "</ul></div>"
);

notice the two new divs with class ulContainer and how the first one has firstHalf (the first half) and the second div has regionLis (the second half of the array). The two divs will need the below css to make the them align next to each other as well.

.ulContainer{
  display:inline;
  float:left;
}

Here is an updated codepen for you too

Upvotes: 1

Related Questions