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内的

。请参见此处的示例：

热门示例输出（没有功能）：http://imgur.com/a/vYQct。

底部示例输出（无功能）：http://imgur.com/a/EZ3UJ。

编辑：我在图片中添加了#grid青色，以便更容易看到问题。此外，我使用同位素/砌体，它只适用于#grid，这就是为什么功能性示例具有水平对齐的DIV，而非功能性示例不具备。

这些片段是我实际代码的独立部分，以更好地呈现我的问题。我做有理由使用某个功能，但那是一堆蠕虫。是否有一个简单的答案，说明为什么我不能在DIV函数中附加到DIV中？

谢谢！

2 个答案:

答案 0 :(得分：1)

答案 1 :(得分：0)

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>

Answer 2

这是您的功能的工作版本。首先，你在最后一个追加上使用ID而不是class。其次，你不需要在javascript中用$加前缀变量，你应该使用单引号来包含HTML（能够在html中使用双引号而不必转义它们。）

$(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);
  }
});

.grid {
  background: brown;
  width: 100%;
  height: 10em;
  }
.grid-item {
  background: blue;
  width: 20%;
  height: 100%;
  float: left;
margin-right: 1em;
}

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

附加到DIV只能在JQuery函数之外工作

不起作用的代码：

工作的代码（相同的东西减去函数）：

2 个答案: