javascript - Why does jQuery class selector only return one element? - Stack Overflow

admin管理员组

文章数量:1304954

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?

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?

• javascript
• jquery
• jquery-selectors

Share Improve this question Follow edited Jun 26, 2017 at 23:12 David asked Jun 26, 2017 at 23:10 DavidDavid 3,32311 gold badge4141 silver badges5757 bronze badges 5

• seems like the document.getElementsByClassName is returning the wrong thing!! That second div doesn NOT include the class current-pad-o – Jaromanda X Commented Jun 26, 2017 at 23:12
• I am willing to bet it ain't jQuery, I am willing to bet what you think is jQuery is the debugger's shortcut for document.querySelector – epascarello Commented Jun 26, 2017 at 23:12
• But that's not the same class selector - one is current-pad-o and the other one is currtrip-pad-o. They are different. – Wayne Allen Commented Jun 26, 2017 at 23:12
• Question was edited. The jQuery selector works with the updated example. – Alexander Higgins Commented Jun 26, 2017 at 23:15
• Please provide a minimal reproducible example that reproduces issue – charlietfl Commented Jun 26, 2017 at 23:17

Add a ment  | 

1 Answer 1

Sorted by: Reset to default 12

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 mand 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

本文标签： javascriptWhy does jQuery class selector only return one elementStack Overflow