动态列表分成两个UL

Question

我对JS/jQuery不是很了解，需要一些帮助才能理解我需要做什么。

单击链接时，我正在填充一个模态。单击链接时，将根据数据属性创建UL。我试图解决的问题是，当点击链接时，它只创建了一个UL，我需要将其分解为两个UL。这是一个工作代码笔：https://codepen.io/west4me/pen/BGVgPy.要单击的链接是"查看区域"。

我想我需要在这里把它一分为二：

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

如果你能给我指明正确的方向，我将不胜感激

Answer 1

您可以使用splice((将数组一分为二。例如

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

这将使firstHalf包含regionLis的前半部分，而regionLis变量现在将包含后半部分。

然后，您的模态的.append()将看起来像

.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>"
);

注意具有类ulContainer的两个新div，以及第一个div如何具有firstHalf(数组的前半部分(和第二个div如何拥有regionLis(数组的后半部分(。这两个div将需要下面的css来使它们彼此相邻对齐。

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

这里有一个更新的代码笔也为你