0

我对当前的问题有一些困难。基本上，我试图遍历 jquery 数组中的所有元素并附加一个新的 div 元素（带有一个新的 id）。我的javascript代码比较简单：

<script language="javascript" type="text/javascript">
$(document).ready(function() {

  var length = $(".content-fill").length,
    element = null;

  for (var i = 0; i < length; i++) {
    element = $(".content-fill")[i];
    element.append('<div id="myid" ' + i + ' style="display:block; float:left;width:400px; height:250px; margin-top:400px;margin-left:400px;border:1px dashed #CCCCCC;"></div>');
  }

});
</script>

但是，当我运行此代码时，控制台窗口会报告以下错误：Uncaught TypeError: Object # has no method 'append'。

我认为这意味着 Jquery 没有正确加载......但是，这个页面的标题肯定有以下参考行：

<script src="//ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>
<script>window.jQuery || document.write('<script src="scripts/jquery-2.0.0.min.js"><\/script>')</script>
<script src="//ajax.googleapis.com/ajax/libs/jqueryui/1.10.3/jquery-ui.min.js"></script>

有谁知道为什么我会收到这个错误？

4

3 回答 3

2

您在这段代码中有许多冗余，您可以使用 jQuery 的 each 方法更简单地处理很多您正在做的事情。我还修复了引用附加 div 的 id 的问题。

<script language="javascript" type="text/javascript">
$(document).ready(function() {

  $(".content-fill").each(function(i, element){
    $(element).append('<div id="myid' + i + '" style="display:block; float:left;width:400px; height:250px; margin-top:400px;margin-left:400px;border:1px dashed #CCCCCC;"></div>');
  });

});
</script>

您可以通过使用append带有函数的 jQuery 形式进一步简化

<script language="javascript" type="text/javascript">
$(document).ready(function() {

  $(".content-fill").append(function(i){
    return '<div id="myid' + i + '" style="display:block; float:left;width:400px; height:250px; margin-top:400px;margin-left:400px;border:1px dashed #CCCCCC;"></div>';
  });

});
</script>
于 2013-06-29T21:05:29.637 回答
2

使用.eq，这将返回 jQuery 对象，而不是 DOM 元素。

element = $(".content-fill").eq(i);
于 2013-06-29T21:01:35.850 回答
0

使用jQuery $.each()：

$(document).ready(function () {
    $.each($(".content-fill"), function (i) {
        $(this).append('<div id="myid" ' + i + ' style="display:block; float:left;width:400px; height:250px; margin-top:400px;margin-left:400px;border:1px dashed #CCCCCC;"></div>');
    });
});

或jQuery $().each()：

$(document).ready(function () {
   $(".content-fill").each(function (i) {
        $(this).append('<div id="myid" ' + i + ' style="display:block; float:left;width:400px; height:250px; margin-top:400px;margin-left:400px;border:1px dashed #CCCCCC;"></div>');
    });
});
于 2013-06-29T21:03:47.217 回答