循環陣列，並獲得每4項李，並將其添加到UI列表

Question

我有這個列表與類名列表我需要循環他們，並獲得他們的每4個名單，並將其附加到UL div類名第一個wrp我用JavaScript創建一個並獲得4個項目，但是將字段追加到ul中，因爲這個錯誤稱爲

「Uncaught TypeError：'Node'上執行'appendChild'失敗：參數1爲不是'節點'類型。「

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

塊是一個數組。它應該是

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>