Javascript 分解此jQuery代码

这是我在S\O上的第一篇文章，我正试图了解以下代码及其工作原理，以便更好地理解如何实现自己的代码

我正在进行Odin项目，我一直在创建一个16 x 16的网格。我选择看一个例子，但不确定它是如何完全工作的

代码如下：

function createGrid(x) {
    for (var rows = 0; rows < x; rows++) {
        for (var columns = 0; columns < x; columns++) {
            $("#container").append("<div class='grid'></div>");
        };
    };
    $(".grid").width(640/x);
    $(".grid").height(640/x);
};

函数createGrid（x）{
对于（变量行=0；行

我不明白为什么需要最后两行。我认为这个循环足以创建网格

---

提前感谢。

最后两行简单地将每个DIV的宽度和高度重置为640除以网格正在创建的行/列数

---

可以想象，设置高度/宽度的代码逻辑可以在.append（）调用之后立即包含，但这是个人偏好的问题

在本例中，两条底线将网格大小按行数进行划分，使每个单元格的大小正确。最后两行只设置每个div的宽度和高度。网格存在，只是在这些行之前没有任何特定的大小。如果没有css，这将创建一列div，而不是网格。@DaniP我的意思是。。从技术上讲，在最后执行一次实际上是再次循环通过它们。除非我弄错了，否则对$（selector）.width（）的调用仍然会循环通过选择器中匹配的每个元素来分配宽度。因此，性能几乎相同。事实上，我认为如果你想在你的页面上包含多个网格，如果你用一个6x6网格来跟踪，那么原始的逻辑会弄乱一个先前呈现的3x3网格。@DaniP一次，每个网格单元。如果每次附加每个网格单元时都执行此操作，则会发生这种情况。如果您在与追加相同的操作中设置宽度，它甚至可能会更有效。@DaniP-您完全正确，因为我错误地陈述了我的意图（后来更新了我的答案）。我必须重读一遍才能看出我的错误。很抱歉造成混淆。如果您追求的是最高效的浏览器，那么您将直接更改css（可以通过js进行更改），而不是应用计算出的宽度。更好的jquery是在宽度之后用高度链接，而不是重新选择。但这似乎离题了：）。