$(this) differs from 'element' parameter in the context of the $.each loop

Question

Possible Duplicate:
jQuery equivalent of getting the context of a Canvas

My Questions are:

1) Why does the commented code not behave like that above it (i.e why does it throw an error)?

$(function () {
  $('#ex4').append('<canvas class=can ></canvas>');
  $('#ex4').append('<canvas class=can ></canvas>');
  $('#ex4').append('<canvas class=can ></canvas>');

  $('#ex4 canvas').each(function (index, element) {
    $(this).attr("width", "125")
    $(this).attr("height", "50")

    var context = element.getContext("2d");
    //var context = $(this).getContext("2d");   error

    context.strokeStyle = "red";
    context.fillStyle = "#999900";
    context.font = "30px Arial";
    context.fillText("HTML5", 0, 35);
  });
})

2) How do I resolve the error (presumably the same as that above) in the analogous code below?

$.each(data[0], function (i) {
  $('#content').append('<canvas id=' + i + ' class=can ></canvas>');
  $('#content #' + i).attr("width", "125")
  $('#content #' + i).attr("height", "50")

  //var context = $('#content #'+i).getContext("2d"); error

})

Have a look at this question: http://stackoverflow.com/q/2925130/1169798 — Sirko, Feb 04 '13 at 13:23
$(this) does not reference the element, but all the canvas elements as an array (";;") try logging to console to see the difference — Vogel612, Feb 04 '13 at 13:26
"I want to know why the error row is error" - it took me a while to process this question... You should write a bit more verbose question to make sure it is easy to follow, something along "I want to know why the line that I commented below as 'error' is a bug'" — Iftah, Feb 04 '13 at 13:33
@Vogel612 - actually you are wrong, in the $.each handler the $(this) is the same as $(element) (ie. just the current iteration, not all elements). The "error row" is because he tried to use getContext on the wrapped jquery object, when it should be on the DOM element (ie. no need wrapping by $) — Iftah, Feb 04 '13 at 13:36
@Iftah so just using this instead of wrapping it would have fixed it? — Vogel612, Feb 04 '13 at 13:39

nbrooks · Accepted Answer · 2013-02-04T13:55:08.747

getContext is a method of the canvas element, not a jQuery method.

Any object you see looking like $(...) is a jQuery object, and you can only access jQuery methods and properties from that object. To access the underlying element of a jQuery object, you can dereference it like an array. e.g. The first element in a jQuery object would be $(...)[0], and so on.

Within the context of the each loop, the object you labeled as element is in fact the HTML element (in this case the canvas element), which is why that line works. this and element are synonymous there, so you can use either one. $(this) and $(element) are both jQuery objects however.

Likewise, in your second example, $('#content #'+i) references a jQuery object, and $('#content #'+i)[0] gives you the underlying DOM element.

$('#content #'+i)[0].getContext("2d"); //yields appropriate result

As a general note

The error message Object xyz has no method 'abc', or something similar, which you no doubt received when you attempted to invoke getMethod on the jq object, generally suggests you're chaining a method on to something whose structure you're misunderstanding—and is generally a good sign you should go and consult the API for the object you're working with. Logging the object to the console usually also gives good insight into it's structure, and in this case doing so would've told you that you weren't actually operating on the canvas.

Shai Aharoni · Answer 2 · 2013-02-04T13:28:38.580

1

instead of //var context = $(this).getContext("2d");

use: var context = $(this)[0].getContext("2d");

and instead of : //var context = $('#content #'+i).getContext("2d"); error

use: var context = $('#content #'+i)[0].getContext("2d"); error

edited Feb 04 '13 at 13:28

answered Feb 04 '13 at 13:27

Shai Aharoni

1,955
13
25

6

Why use `$(this)[0]` instead of just `this`? – John Dvorak Feb 04 '13 at 13:28

$(this) differs from 'element' parameter in the context of the $.each loop

2 Answers2

As a general note