jQuery类名选择器索引操作疑问：为何$('.anyclass')[1][0]报错？

Hey there! Let's clear up this common confusion step by step—this is a super typical gotcha when moving between native JavaScript and jQuery.

Why $('.anyclass')[1][0] throws an error #

Let’s break down exactly what’s happening here:

• When you run $('.anyclass'), you get a jQuery object—this is a wrapper around the native DOM elements you selected. It looks like an array, but it’s actually a custom object that stores DOM elements in an internal collection.
• Using square brackets like [1] on a jQuery object directly pulls out the native DOM element at that index. So $('.anyclass')[1] is no longer a jQuery object—it’s a plain DOM node, just like what you’d get from document.getElementsByClassName('anyclass')[1].
• DOM elements aren’t arrays or array-like collections themselves. When you try to add [0] to that single DOM element, you’re asking for a 0th index property that doesn’t exist—hence the TypeError: $(...)[0][0] is undefined.

How to get a jQuery object for a specific element in the collection #

If you want to target a specific element from your jQuery selection and keep it as a jQuery object (so you can use jQuery methods on it), skip the square brackets. Instead, use jQuery’s .eq() method:

// Returns a jQuery object containing the 2nd element (index 1)
$('.anyclass').eq(1)

This way, you can chain jQuery methods right onto it, like $('.anyclass').eq(1).hide() or $('.anyclass').eq(1).addClass('highlight').

How to convert a DOM element back to a jQuery object #

If you already have a native DOM element (like from $('.anyclass')[1]), you can wrap it in the jQuery function $() to turn it back into a jQuery object:

// Grab the native DOM element
const domElement = $('.anyclass')[1];
// Convert it to a jQuery object
const jqueryElement = $(domElement);

// Now you can use all jQuery methods on it
jqueryElement.css('color', 'blue');

Quick comparison to native JS #

• Native document.getElementsByClassName('anyclass') returns an HTMLCollection (an array-like object of DOM elements), so [1] gives you a DOM element—same as $('.anyclass')[1].
• The key difference is that jQuery wraps its collection in a custom object with extra methods. So you either use .eq() to get a wrapped element, or wrap DOM elements back in $() if you need jQuery’s functionality.

内容的提问来源于stack exchange，提问作者user8011247