7

I'm using this code to play a preloaded mp3 file.

var shuffle = $("#shuffle")[0]; 

shuffle.play();

Shuffle is my id. I got the code off the net but I CANNOT figure out what the [0] after the jquery selector does. The sound does not play if I remove it.What does it do?

thanks

Anatoly
  • 159
  • 2
  • 5
  • 1
    http://stackoverflow.com/questions/1302428/what-does-jquery-actually-return – Jack May 08 '12 at 02:02
  • Thanks to all the answers so far. I guess I should elaborate. I figure that was an array of sorts. But where would you go to figure out that the first element of the audio tag is the play button? – Anatoly May 08 '12 at 02:06
  • Check out NiftyDude's answer. It isn't actually an array per se, it's a JQuery Object with an array-like structure containing only 1 element (as you used the `ID Selector`). Adding `[0]` returns the DOM element instead of the JQuery object, allowing you to use the `.play()` method. – Fabrício Matté May 08 '12 at 02:09

7 Answers7

10

jQuery is an array-like object that contains all of your matched elements. Often times, jQuery will by default apply its changes to the first element in the collection:

$("li").css("display"); // display val of first element, not all elements.

Even though many li elements could have been found, the jQuery object tells us about the first implicitly. We could explicitly instruct it to do so by using the $.get method:

$("li").get(0); // Returns first DOM element
$("li")[0]; // Also returns first DOM element

We could check the nodeName to verify this:

$("li").get(0).nodeName; // LI
$("li")[0].nodeName; // LI

If we look under the covers, we can see how $.get() is implemented:

get: function(num) {
  return num == null 
    ? this.toArray() 
    : ( num < 0 
          ? this[ this.length + num ] 
          : this[ num ] );
}

From this we can see that when no argument is provided, the entire collection of element is converted to an array, and then returned. When an argument is provided, for instance 2, we return the element as index 2. If -2 is provided, this is added to the length (suppose the length is 5, 5+(-2) is 3) and the resulting number is used as the index.

So with regards to your particular example:

var shuffle = $("#shuffle")[0];
shuffle.play();

jQuery is used to get any element that has the id value of shuffle. This returns the jQuery array-like object. But your play() method doesn't exist on the jQuery object, it exists on the #shuffle object. As such, you need to get the first element in the collection.

You could use $.get(0), however as we just saw, this would just be adding one more step. Internally, jQuery would perform the same code you're performing above, [0].

Sampson
  • 265,109
  • 74
  • 539
  • 565
1

In the direct context of your question, $("#shuffle") is a selector of an id, which returns a jQuery object (not an array per-se, but it has an array-like structure), then the [0] part is actually returning a native DOMElement object of the element with id shuffle instead of the jQuery object returned by calling $('#shuffle') (without the []).

Essentially the same as doing document.getElementById('shuffle')

EDIT (as Matt pointed out)

this will then allow you to do your .play() call to start your audio stream.

Andreas Wong
  • 59,630
  • 19
  • 106
  • 123
  • Best answer here, I was just about to post something similar. The important point to note here is that derefencing the array with `[0]` means you get the `DOMElement`, not the jQuery one, which allows you to do your `.play()` call to start your audio stream. – Matthew Scharley May 08 '12 at 02:03
  • Thanks NiftyDude. that helped me put it together. I need to get the DOM element to use play(): http://www.w3schools.com/HTML5/av_met_play.asp – Anatoly May 08 '12 at 02:35
0

The brackets after the $('#shuffle') get the first element of that selector provided.

$('div.test')[0];

<div class="test"></div> <-- this one would get returned
<div class="test"></div>
<div class="test"></div>
Bryan
  • 6,682
  • 2
  • 17
  • 21
0

It returns the native javascript object containing the first element in the matched set of elements.

adeneo
  • 312,895
  • 29
  • 395
  • 388
-1

The nth element of the returned array. The same as in regular javascript or php and a good part of the programming languages which support arrays.

Fabrício Matté
  • 69,329
  • 26
  • 129
  • 166
-1

JQuery returns an array. [0] takes the first item in the array.

Robert Levy
  • 28,747
  • 6
  • 62
  • 94
  • Technically, it's a jQuery array-like object, not an array. Not an issue unless you try to do something like `.shift()` the first element. – Blazemonger May 08 '12 at 02:03
-1

Its means the chronological order of object to be process always used on array [0],[1],[2]... you can check Here

Rashid
  • 9
  • 1