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