Question

我有这个带有类名列表的li列表我需要循环它们并获取它们的每4个列表并将其附加到div中的div，类名为first wrp i使用JavaScript创建一个并获得4个项目但是要将其附加到ul中的字段，因为这是一个名为

的错误

“未捕获的TypeError：无法在'Node'上执行'appendChild'：参数1的类型不是'Node'。”

var fristWrp = document.querySelector('.fristWrp');
  var list = document.querySelectorAll('.list');    
  var arrayList = Array.from(list);
    
    let iterations = Math.ceil(list.length / 4);
    for (var i = 0; i < iterations; i++) {
        var chunk = arrayList.slice(i * 4, (i + 1) * 4);
        var createUl = document.createElement('ul');        
        fristWrp.appendChild(createUl);
        createUl.appendChild(chunk);                        
    }

<div class="fristWrp">

</div>


<li class='list'>text 1</li>
<li class='list'>text 2</li>
<li class='list'>text 3</li>
<li class='list'>text 4</li>
<li class='list'>text 5</li>
<li class='list'>text 6</li>
<li class='list'>text 7</li>
<li class='list'>text 8</li>
<li class='list'>text 9</li>
<li class='list'>text 10</li>

Answer 1

chunk是一个数组。它应该是

var fristWrp = document.querySelector('.fristWrp');
var list = document.querySelectorAll('.list');

var arrayList = Array.from(list);
let iterations = Math.ceil(list.length / 4);
for (var i = 0; i < iterations; i++) {
  var chunk = arrayList.slice(i * 4, (i + 1) * 4);
  var createUl = document.createElement('ul');
  fristWrp.appendChild(createUl);
  chunk.forEach(function(item) {
    createUl.appendChild(item);
  })
}

Answer 2

您可以让查询选择器为您完成艰苦的工作:nth-child()

var fristWrp = document.querySelector('.fristWrp');
var list = document.querySelectorAll('.list:nth-child(4n+1)');    
Array.from(list).forEach((chunk) => {
  var createUl = document.createElement('ul');        
  fristWrp.appendChild(createUl);
  createUl.appendChild(chunk);                        
});

<div class="fristWrp">

</div>


<li class='list'>text 1</li>
<li class='list'>text 2</li>
<li class='list'>text 3</li>
<li class='list'>text 4</li>
<li class='list'>text 5</li>
<li class='list'>text 6</li>
<li class='list'>text 7</li>
<li class='list'>text 8</li>
<li class='list'>text 9</li>
<li class='list'>text 10</li>

在数组上循环并获取Li的每4项并将其添加到UI列表中

2 个答案: