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包装在一个容器中，并在容器中指定你的目标选择器，你的代码将起作用。

这是一个工作片段：

＆＃13;

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

＆＃13;

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

＆＃13;

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

＆＃13;

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

Answer 2

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

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

一种选择是使用：nth-of-type选择器，如下所示

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

演示：Fiddle

另一种方法是在脚本之前插入div，如

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

演示：Fiddle

但更好的解决方案是使用自定义容器元素而不是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;
}

演示：Fiddle

第n个孩子不在身体内工作

2 个答案: