動態列表分為兩個UL

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;
}

這也是給您的更新的Codepen