Question

我对JS / jQuery的了解不是很广，可以帮助我了解我需要做什么。

单击链接时，我正在填充模态。单击链接后，将根据数据属性创建UL。我要解决的问题是，单击链接时，它仅创建一个UL，而我需要将其分为两个UL。这是一个有效的Codepen：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

动态列表分为两个UL

1 个答案: