根据索引对数组进行切片

Question

我有当前的 HTML：

<div id="1-1">TITLE1</div>
<div id="1-2">TITLE2</div>
<div id="1-3">TITLE3</div>
<div id="1-4">TITLE4</div>
<div id="1-5">TITLE5</div>

<div class="topic">A1</div>
<div class="topic">B2</div>
<div class="topic">C3</div>
<div class="topic">D4</div>
<div class="topic">E5</div>
<div class="topic">F6</div>
<div class="topic">G7</div>
<div class="topic">H8</div>
<div class="topic">I9</div>
<div class="topic">J10</div>
<div class="topic">K11</div>
<div class="topic">L12</div>
<div class="topic">M13</div>
<div class="topic">N14</div>
<div class="topic">O15</div>

我想使用 JavaScript 创建一个 for loop，它将基于此对象将正确的 .topic 节点附加到正确的 TITLE div 中：

all = {'1-1': ['A', 'B', 'C'], 
       '1-2': ['D'],
       '1-3': ['E', 'F', 'G', 'H'],
       '1-4': ['I', 'J'],
       '1-5': ['K', 'L', 'M', 'N', 'O']
      };

循环理想的结果：

<div id="1-1">TITLE1
<div class="topic">A1</div>
<div class="topic">B2</div>
<div class="topic">C3</div>
</div>

<div id="1-2">TITLE2
<div class="topic">D4</div>
</div>

<div id="1-3">TITLE3
<div class="topic">E5</div>
<div class="topic">F6</div>
<div class="topic">G7</div>
<div class="topic">H8</div>
</div>

<div id="1-4">TITLE4
<div class="topic">I9</div>
<div class="topic">J10</div>
</div>

<div id="1-5">TITLE5
<div class="topic">K11</div>
<div class="topic">L12</div>
<div class="topic">M13</div>
<div class="topic">N14</div>
<div class="topic">O15</div>
</div>

我通过创建两个数组尝试了这一点——all 中的“TITLE*”位置之一和每个切片中应该有多少“主题”的另一个位置

let header_position = [0,4,6,11,14]
let topics_between = [3,1,4,2,5]

我试图利用这一点并为for loop 找到一个模式，以便我可以使用这些数组编号将事物放在正确的位置，但我似乎无法找出正确的循环。任何帮助将不胜感激：

尝试的解决方案

for (i = 0; i < header_position.length; i++) {
  // i = 0 topics.slice(0,2)
  // i = 2 topics.slice(3,3)
  // i = 3 topics.slice(4,7)
  // i = 4 topics.slice(8,9)
  // i = 5 topics.slice(10,14)
  
  let currentslice = topics.slice(header_position[i] + 1, header_position[i + 1] - 2)
  
  if (i === 0) {
    currentslice = topics.slice(0, topics_between[i] - 1)
  }
  
  console.log(currentslice)
  currentslice.appendTo("#1-" + [i + 1])
}

这个循环不能按现在的样子工作，但我希望能在尝试使这个逻辑正常运行时提供任何帮助或考虑！

Answer 1

你的问题似乎很理论......对我来说看起来像XY problem。

我假设你的标题肯定不会是 TITLE1、TITLE2 等等，并带有一些真实的内容。

我想您设法定义了 all 数组以开始组织您的页面...但是从发布的内容来看，我无法提出更好的方法。

因此，如果我按原样采用 all 和 header_position 数组，则循环将使用两个 索引，一个用于标题，一个用于主题。

看看下面，告诉我这是否回答了您的理论问题以及您的具体需求。

let all = [ "TITLE1", "A", "B", "C", 
            "TITLE2", "D",
            "TITLE3", "E", "F", "G", "H",
            "TITLE4", "I", "J",
            "TITLE5", "K", "L", "M", "N", "O"]
            
let header_position = [0,4,6,11,14]
//let topics_between = [3,1,4,2,5]  // not used

let headerIndex = -1
let topicIndex = 0

for(i=0;i<all.length;i++){
  if(header_position.indexOf(i)>-1){
    headerIndex++
    continue
  }
  $(".header").eq(headerIndex).append($(".topic").eq(topicIndex))
  topicIndex++
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="header" id="1-1">TITLE1</div>
<div class="header" id="1-2">TITLE2</div>
<div class="header" id="1-3">TITLE3</div>
<div class="header" id="1-4">TITLE4</div>
<div class="header" id="1-5">TITLE5</div>

<div class="topic">A1</div>
<div class="topic">B2</div>
<div class="topic">C3</div>
<div class="topic">D4</div>
<div class="topic">E5</div>
<div class="topic">F6</div>
<div class="topic">G7</div>
<div class="topic">H8</div>
<div class="topic">I9</div>
<div class="topic">J10</div>
<div class="topic">K11</div>
<div class="topic">L12</div>
<div class="topic">M13</div>
<div class="topic">N14</div>
<div class="topic">O15</div>

Answer 2

据我了解，您希望将其按标题分开。你可以这样做：

let count = 0;

for (let i = 0; i < all.length; i++) {
    if (all[i].includes("TITLE")) {
        let element = document.createElement("div");
        element.innerHTML = all[i];
        element.id = `1-${count + 1}`;
        document.body.appendChild(element);
        count++;
    } else {
        let element = document.createElement("div");
        element.className = "topic";
        element.innerHTML = `${all[i]}${i - count + 1}`;
        document.getElementById(`1-${count}`).appendChild(element);
    }
}

让我知道它是否有效。