CODEWITHSUNDEEP
jquery
andyopayne
andyopayne

Reputation: 1368

Jquery no append method

I'm having some difficulty with a current problem. Basically, I'm trying to loop through all of the elements in a jquery array and append a new div element (with a new id). My javascript code is relatively simple:

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

However, when I run this code, the console window reports the following error: Uncaught TypeError: Object # has no method 'append'.

I would assume this means that Jquery isn't loaded properly... however, the header for this page definitely has the following reference lines:

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

Does anyone know why I would be getting this error?

Upvotes: 0

Views: 65

Answers (3)

Chris Cherry
Chris Cherry

Reputation: 28574

You have a number of redundancies in this code, you can use jQuery's each method to handle a lot of what you are doing more simply. I've also fixed a problem in the quoting of the id of the appended div.

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

You can simplify further by making use the form of jQuery's append that takes a function

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

Upvotes: 2

A. Wolff
A. Wolff

Reputation: 74420

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

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

Upvotes: 0

Adil Shaikh
Adil Shaikh

Reputation: 44740

use .eq , this will return jQuery object, instead of DOM element.

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

Upvotes: 2

Related Questions