Why does jQuery class selector only return one element?

Question

There are multiple divs with the class in the document.

As seen in the console, document.getElementsByClassName produces:

document.getElementsByClassName('current-pad-o')
HTMLCollection (2) = $8
0 <div class="red current-pad-o"> first value </div>
1 <div class="red current-pad-o"> second value </div>

and jquery, with the same class selector produces:

$('.current-pad-o')
// (the first div only - no collection)
<div class="red current-pad-o"> first value </div>

I would expect a collection from the jquery statement also. These were output in both Safari and Firefox.

According to the jQuery Class Selector documentation , the second selector Selects all elements with the given class .

Why does jquery only return one, instead of a collection?

Answer 1

You do not have jQuery, you are using the debugger's shortcut for document.querySelector() . If you would use $$('.current-pad-o') , you would get all of them.

Too verify that you are not using jQuery, type the following into the command line:

console.log($)

For querySelector, you are going to see this:

function $(selector, [startNode]) { [Command Line API] }

For jQuery, you would see this:

function (a,b){return new n.fn.init(a,b)}

Reference: console expressions