Question

我遇到了当前问题的困难。基本上，我试图遍历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>

但是，当我运行此代码时，控制台窗口会报告以下错误：未捕获的TypeError：对象＃没有方法'追加'。

我认为这意味着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>

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

Answer 1

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

element = $(".content-fill").eq(i);

Answer 2

您在此代码中有许多冗余，您可以使用jQuery的每种方法来处理您正在做的更多简单的操作。我还修改了引用附加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>

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

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

Answer 3

使用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>');
    });
});

Jquery没有追加方法

3 个答案: