javascript - 动态列表分为两个 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;
}

这是一个updated codepen也适合你