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と、DOM 要素ではなく jQuery オブジェクトが返されます。

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 に答える