1

I came across the following in a piece of code:

var searchBox = $(this.element[0]);

I'm pretty new to Javascript and jQuery. I am trying to understand it but i am having a hard time. This line is in an implementation of jQuery UI Accordion widget.

What does the this refer to?

Also, I played a bit with the line and I came to an understanding that it works perfectly - no matter what number is in the array. In addition, if I remove the brackets and just write the following line, it works just fine:

var searchBox = $(this.element);

What is it means and what is the difference?

Thank you very much. :)

Edit: Here is my full code. Maybe it could help. https://jsfiddle.net/yx8puo2j/1/

Sipo
  • 2,826
  • 4
  • 26
  • 61
  • 4
    See [here](http://stackoverflow.com/questions/3127429/how-does-the-this-keyword-work), it has a detailed explanation on how `this` work. – Mel Aug 19 '15 at 08:54
  • "What does the `this` refer to?" - it depends on the context. – Igwe Kalu Aug 19 '15 at 08:56
  • Assuming `this.element` refers to a jQuery object (selected previously) then `$(this.element[0])` creates a *new* jQuery object of just the first selected (DOM) element. It could also be written as [`this.element.first()`](https://api.jquery.com/first/). However, `this.element[0]` will work in others cases - eg. not just jQuery objects - such as normal Arrays and HTMLCollections.. – user2864740 Aug 19 '15 at 08:58

3 Answers3

3
var searchBox = $(this.element[0]);

returns one element (1 object).

var searchBox = $(this.element);

return a list of elements.

This states for classes, not for id (cause id is unique).

Examples:

  • var searchbox = $(this.angry_button) returns all (list) elements with class angry_button.
  • var searchbox = $(this.angry_button[0]) returns the first element with class angry_button.
  • var searchbox = $(this.angry_button[1]) returns the second element with class angry_button.
Community
  • 1
  • 1
3pic
  • 1,172
  • 8
  • 26
  • But why does it work for every number I use? I have only one `input` element with a `id="searchBox"` as shown in the code, so why does `var searchBox = $(this.element);` works exactly like `var searchBox = $(this.element[0]);` or even `var searchBox = $(this.element[-1]);`? – Sipo Aug 19 '15 at 09:53
  • Are you Greek ? (curiousity) – 3pic Aug 19 '15 at 09:59
  • Lol, not. Israeli. :) – Sipo Aug 19 '15 at 10:00
  • ∏ (pi) is israeli too ? – 3pic Aug 19 '15 at 10:02
  • It's not Pi, it's the hebrew letter [Heth](https://en.wikipedia.org/wiki/Heth). :) Why class and not id? – Sipo Aug 19 '15 at 10:04
  • Oops... I mean use `var searchbox = $("#searchbox");`. Keep it simple. – 3pic Aug 19 '15 at 10:05
  • Let us [continue this discussion in chat](http://chat.stackoverflow.com/rooms/87361/discussion-between-sipo-and-strukt). – Sipo Aug 19 '15 at 10:06
1

When you use

var searchBox = $(this.element[0]);

You're selecting the first

element

of "This" where "This" is the element you're currently in like a div or an input field

DieVeenman
  • 437
  • 1
  • 3
  • 17
1

I cant tell you what this is, but I can explain a bit what happens and why it works:

In jQuery you can select any element with $(""), but what if you select an class that exists multiple times in the DOM?? So I got this button class that exists 5 times in the document and i select it with $(".button") . This now returns an array with 5 items in it.

If we want to select the first button that would be $(".button[0]") if we want to select the fifth button that would be $(".button[4]")

so basically you are selecting element n within the page that has that specific identifier.
jimmy jansen
  • 629
  • 4
  • 11