Using jQuery to select by id versus array index

Question

When jQuery returns an array of DOM elements, I am struggling to understand how that differs from when jQuery returns a single DOM element, as in the code below:

<html>
<head>
<title>A simple login form</title>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<script>
function validateInput() {
    var input = $('input');
    var passwordById = $("#password1");
    var passwordByIndex = input[0];
    // What's the difference between these?
    passwordById.val(); // Value of password field
    passwordByIndex.val(); // Undefined!
}
</script>
</head>
<body>
<form>
    <h2>Username</h2>
    <input type="text" id="username" required>
    <h2>Password</h2>
    <input type="password" id="password" required>
    <input type="button" value="Submit" onClick="validateInput()">
</form>
</body>

I want to use passwordByIndex because I wish to iterate over array $('input').

passwordByIndex is one single character, extracted from `input`, it doesn't have any properties, like `.val()`. — Christian Dechery, May 27 '14 at 17:21
if you're wanting to do an index-based lookup of an element, don't hook the array. Instead, use .eq() or :eq(). Example: `$('input:eq(0)')` or `$('input').eq(0)` — Steve, May 27 '14 at 17:24
input[0] gets the first dom element. If you wanted it as a Jquery object you could do $(input[0]) and get the val() from that. Then that and passwordById are identical. The best choice depends entirely on your circumstances. :) — JakeSidSmith, May 27 '14 at 17:33
BTW `passwordByIndex = input[1]` not `[0]`. Once you know that and convert it to a jQuery object you'll get back the exact same thing as `passwordByID.val()`. — Jay Blanchard, May 27 '14 at 17:42

score 2 · Answer 1 · edited May 23 '17 at 10:26

2

The difference here is that one is a jQuery object and one is a DOM element. Take the following code snippet to help:

// this gives me a jQuery object. Might reference one element, might reference multiple
var jQueryElement = $(".myclass");

// I can just call jQuery routines on the jQuery element:
var innerHtml = jQueryElement.html();

// this would give me a dom element
var domElement = jQueryElement[0];

// ... to call jQuery routines on a traditional element I need get back
//     to a jQuery object:
var myHTML = $(domElement).html();

Hopefully this helps explain the difference. As noted in the comments above, you might find the following questions useful:

More about the difference - jQuery object and DOM element
Convert DOM to jQuery object - How can I convert a DOM element to a jQuery element?
Convert jQuery object to DOM element - http://api.jquery.com/get/

edited May 23 '17 at 10:26

Community

1
1

answered May 27 '14 at 17:32

drew_w

10,320
4
28
49

So if I'm understanding this correctly, getting the DOM element (in my case by the index) is a bad idea, because that's browser-specific (whereas jQuery objects aren't). – petehern May 27 '14 at 17:41
@petehern DOM elements aren't really browser specific, just certain properties on them are. There are a number of properties that you can use that work across pretty much all major browsers. Look up the property you want to get or set on MDN (https://developer.mozilla.org/en-US/) and you can probably find a way to do it across most major browsers. jQuery just simplifies this checking process and provides a nice framework for handling the really strange cases. Best of luck! – drew_w May 27 '14 at 17:45

Raj · Answer 2 · 2014-05-27T22:16:58.067

input[0] returns a DOM element that isn't a jQuery object. $('#password1') gets the password1 DOM element using its ID tag, and turns it into a jQuery object. A jQuery object is a special array-like object, with methods added that allow you to do things like $('#password1').val(). (Read more about the jQuery object HERE)

If you do $('input')[0], like you have done, or even $('#password1')[0], it gets the plain (non-jQuery) DOM element at index 0 of the special jQuery array-like object. Therefore, you do not have access to the special jQuery methods like .val().

You can do $(input[0]) if you want to turn it back into a jQuery object to be able to use .val(). In which case, you'd do $(input[0]).val().

Using jQuery to select by id versus array index

2 Answers2