jquery not returning required element using '$(this)'

Question

The following $(this) does not seem to be returning $('.element'). Any ideas why?

$('.element').popover({
  container: $(this)
})

Because the scoping isn't correct. You're setting an objects properties. — ahren, Nov 18 '13 at 13:31
[Maybe you should check this out](http://stackoverflow.com/questions/3127429/javascript-this-keyword) — musefan, Nov 18 '13 at 13:32
What's the link to the plugin you're using? I'll look at the documentation and see if I can find a solution. — ahren, Nov 18 '13 at 13:34

score 4 · Answer 1 · edited Nov 18 '13 at 13:39

4

That's because popover is not an event function, but rather a function that applies some properties to an object.

You can however use each to iterate through every element :

$('.element').each(function(i, obj) {
   obj.popover({
      container: obj
   });
});

edited Nov 18 '13 at 13:39

ahren

16,803
5
50
70

answered Nov 18 '13 at 13:39

Ely

1,189
9
12

score 2 · Accepted Answer · answered Nov 18 '13 at 13:38

As noted by others, the context of this isn't as you perhaps expected. Perhaps try looping over all the elements.

$('.element').each(function() {
    $(this).popover({
        container: $(this)
    });
});

Inside the scope of the each function, $(this) will refer to a specific $('.element') from the list of all the elements with that class.

score 0 · Answer 3 · answered Nov 18 '13 at 13:33

In this particular context, this will refer to whatever happens to be the outer scope. It could be the window object, or some containing function.

Your code is equivalent to this:

var obj = {container: $(this)}; // <-- this is defined in outer scope

$('.element').popover(obj);

jquery not returning required element using '$(this)'

3 Answers3