时间戳

首页 > 解决方案 > 动态列表分成两个UL

javascript - 动态列表分成两个UL

问题描述

当谈到 JS/jQuery 时，我不是很了解，并且可以使用一些帮助来理解我需要做什么。

单击链接时，我正在填充模式。单击链接时，将从数据属性创建 UL。我要解决的问题是，当点击链接时，它只创建了一个 UL，我需要将它分成两个 UL。这是一个有效的代码笔： https ://codepen.io/west4me/pen/BGVgPy 。要单击的链接是“查看区域”。

我相信我需要在这里把它分成两部分：

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

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

标签： javascriptjquery

解决方案

您可以使用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>"
);

注意两个带有类的新 divulContainer以及第一个div 有（firstHalf前半部分）和第二个 div 有regionLis（数组的后半部分）。这两个 div 将需要下面的 css 来使它们彼此对齐。

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

这里也是为您更新的代码笔

推荐阅读