CODEWITHSUNDEEP
javascriptjquery
user687554
user687554

Reputation: 11131

Get DOM Element with jQuery

I have a web page that is structured like this:

  <canvas id="myCanvas"></canvas>

  @for(var i=0; i<10; i++) {
    <div class="my-element">
      <canvas></canvas>
    </div>
  }

This code generates one main canvas. Below it, 10 other dynamically generated divs are being generated. In reality, this loop is just used to show that I have some code being dynamically generated. The main thing to understand is the my-element piece.

In my javascript, I have the following:

$(function() {
  var mainCanvas = document.getElementById('myCanvas');
  initializeCanvas(mainCanvas);  // This works.

  var dynamicElements = $('.my-element');
  for (var i=0; i<dynamicElements.length; i++) {
    initializeCanvas($(dynamicElements[i])[0]);   // This does not work
  }
});

function initializeCanvas(canvas) {
  // do stuff
}

The first call to initializeCanvas works because I'm passing in an actual HTML Dom element. But the second initializeCanvas, which is called multiple times, fails because it's passing in something else. How do I get the same type of element as what's returned by document.getElementById in this case?

Thanks!

Upvotes: 0

Views: 74

Answers (2)

pwolaq
pwolaq

Reputation: 6381

First of all, this doesn't make sense: $(dynamicElements[i])[0]

You are getting jQuery element, unwrapping it, then wrapping again in jQuery...

what you simply need to do is get canvas from the element

dynamicElements.eq(i).find('canvas')[0] should do the job

Upvotes: 1

Qsprec
Qsprec

Reputation: 275

You can't use the same element for this purpose. I suggest you to clone it. Like;

 var dynamicElements = $('.my-element').clone();

Also when you add more element with my-element class this will be messy. You should make sure to select only one element with $('.my-element') selection.

Upvotes: 0

Related Questions