不是在身体内工作的孩子

Question

我试图用div绘制一个6x6网格，但是当我用javascript和css创建它们时，它并没有像预期的那样显示。

css：

div{
    width:30px;
    height:30px;
    margin:0px;
    border:1px solid black;
    float:left;
}
div:nth-child(6n+1){
    clear:both;
}

javascript：

for(var i=0; i<36; i++){
    document.body.appendChild(document.createElement('div'));
}

https://jsfiddle.net/kqzhorq0/

上面的链接演示了我在浏览器中看到的内容。

但是，当我在jsfiddle中选择onload或onDomReady设置时，网格会显示出预期的结果。

如何才能让网格正确地使用onload或onDomReady显示，为什么没有它就不能正确显示？

Answer 1

如果您可以将div包装在容器中，并指定要从容器中指定目标的选择器，那么您的代码就可以工作。

下面是一个工作片段：

​

for(var i=0; i<36; i++){
    document.getElementById("foo").appendChild(document.createElement('div'));
}

#foo div{
  width:30px;
  height:30px;
  margin:0px;
  border:1px solid black;
  float:left;
}

#foo div:nth-child(6n+1){
  clear:both;
}

<div id="foo"></div>

​

我还在nth-child上创建了一个交互演示，以帮助进一步解释它：http://xengravity.com/demo/nth-child/。

Answer 2

这里的问题是，小提琴中身体的第一个孩子是脚本元素。您可以检查结果面板的html以查看脚本元素。

nth-儿童将在使用索引搜索元素时考虑所有元素，但使用nth of型可以搜索特定类型。

一种选择是使用:nth类型选择器，如下所示

div {
    width:30px;
    height:30px;
    margin:0px;
    border:1px solid black;
    float:left;
}
div:nth-of-type(6n+1) {
    clear:both;
}

演示：小提琴

另一种方法是在脚本前面插入div，如下所示

for (var i = 0; i < 36; i++) {
    document.body.insertBefore(document.createElement('div'), document.body.firstChild);
}

演示：小提琴

但是更好的解决方案是使用自定义容器元素而不是body元素。

var ct = document.getElementById('container');
for (var i = 0; i < 36; i++) {
    ct.appendChild(document.createElement('div'));
}

然后

#container > div {
    width:30px;
    height:30px;
    margin:0px;
    border:1px solid black;
    float:left;
}
#container div:nth-child(6n+1) {
    clear:both;
}

演示：小提琴