javascript - 附加到 DIV 仅适用于 JQuery 函数之外

Question

我知道一些 HTML、CSS 和 PHP/SQL 的一些知识 - 但我就是无法理解 JavaScript/JQuery，所以如果这是一个愚蠢的问题，我提前道歉。我在互联网上搜索了六小时十七分钟，最后崩溃了:是时候问问别人了。

不起作用的代码:

<div id="grid"></div>

<script>
$(function() {
  for (i = 1; i <= 4; i++) {
    var $item = $('<div class="grid-item"></div>');
    $item.append("<h3>This is DIV #" + i + "</h3>");
    $("#grid").append($item);
  }
});
</script>

有效的代码(相同的东西减去函数):

<div id="grid"></div>

<script>
  for (i = 1; i <= 4; i++) {
    var $item = $('<div class="grid-item"></div>');
    $item.append("<h3>This is DIV #" + i + "</h3>");
    $("#grid").append($item);
  }
</script>

非功能性示例(顶部)输出 #grid 外部/下面 的 4 个 DIV。功能示例(底部)输出 #grid 内部 4 个 DIV。请参阅此处的示例:

顶部示例输出(不适用于函数):/image/0Fo4O.jpg .

底部示例输出(无需功能即可工作):/image/NU7mg.jpg .

编辑:我在图片中将#grid 设为青色，以便更容易看到问题。另外，我使用的是 Isotope/Masonry，它仅适用于 #grid，这就是为什么功能示例具有水平对齐的 DIV 而非功能示例则没有的原因。

这些片段是我的实际代码的独立部分，以更好地呈现我的问题。我确实有理由使用某个函数，但那是一堆蠕虫。对于为什么我无法在函数内添加 DIV 时，是否有一个简单的答案？

谢谢!

Answer 1

两者都不应该工作，因为您在 HTML 中使用 class:

<div class="grid"></div>

当代码使用id时:

$("#grid").append($item);

两者都在这里工作:

#grid {
  border: 1px solid blue;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div id="grid"></div>

<script>
  for (i = 1; i <= 4; i++) {
    var $item = $('<div class="grid-item"></div>');
    $item.append("<h3>This is DIV #" + i + "</h3>");
    $("#grid").append($item);
  }
</script>

使用函数:

#grid {
  border: 1px solid blue;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div id="grid"></div>

<script>
  $(function () {
    for (i = 1; i <= 4; i++) {
      var $item = $('<div class="grid-item"></div>');
      $item.append("<h3>This is DIV #" + i + "</h3>");
      $("#grid").append($item);
    }
  });
</script>