如何把一些div元素内的主要div元素与javascript?

Question

下面是一个例子:

<div class="main"> </div>
<div class="main2"> </div>

<div class="sub"> content </div>
<div class="sub"> content </div>
<div class="sub"> content </div>
<div class="sub"> content </div>
<div class="sub"> content </div>
<div class="sub"> content </div>
<div class="sub"> content </div>
<div class="sub"> content </div>
<div class="sub"> content </div>

我希望所有符合2n-1等式的div都在maindiv中，所有符合2n等式的div都在main2div中。

我尝试了css n -child，但我不能:/

Answer 1

如果我没理解错的话:

const subs = document.querySelectorAll('.sub')
const main = document.querySelector('.main')
const main2 = document.querySelector('.main2')
for (let i = 0; i < subs.length; i++) {
if(i%2 === 0) {
main.appendChild(subs[i])
} else {
main2.appendChild(subs[i])
}
}

.main{
background: blue;
}
.main2{
background: red;
}

<div class="main"> </div>
<div class="main2"> </div>

<div class="sub"> content1 </div>
<div class="sub"> content2 </div>
<div class="sub"> content3 </div>
<div class="sub"> content4 </div>
<div class="sub"> content5 </div>
<div class="sub"> content6 </div>
<div class="sub"> content7 </div>
<div class="sub"> content8 </div>
<div class="sub"> content9 </div>