JQuery selector not grabbing element

Question

I'm trying a relatively simple jQuery selector, similar to those I've done hundreds of times before, something like :

$('.fail_vid')

However, instead of returning the the element like I expect, i.e.

<div class="fail_vid"></div>

it spits out something like

<div>, prevObject: jQuery.fn.jQuery.init[1], context: #document, selector: ".fail_vid"

What's going on? I've never seen anything like this, and have no idea how to fix it.

I don't see any problem with your code, can you provide an example? — j08691, Dec 03 '12 at 21:29
what are you doing? If logging to console, this is expected behavior. — Colleen, Dec 03 '12 at 21:29
What are you doing with the selector to cause it to "spit something out"? I suspect the problem lies there. — Eric J., Dec 03 '12 at 21:29
That is how the new "Chrome web inspector" outputs a jQuery object, and it's totally normal, even if it's completely unreadable. — adeneo, Dec 03 '12 at 21:32
Alright. I have a RoR partial in which I'm calling some JavaScript. I suspect the jQuery selector is firing before the partial itself is loaded, which is why it's not finding anything. How can I get my JS to fire AFTER the partial's been completely loaded? — Adam Templeton, Dec 03 '12 at 21:33
I think it **did** find something. The first item in the array `
` is the element found! — Andrew, Dec 03 '12 at 21:35
There seems to be one element found, noted by the `jQuery.fn.jQuery.init[1]` containing one indexed property. — adeneo, Dec 03 '12 at 21:38

score 2 · Answer 1 · answered Dec 03 '12 at 21:30

2

The output you're getting is a jQuery object as output by Chrome (23 I think). Elements associated are stored as array indexes. So anything without a key is an element.

answered Dec 03 '12 at 21:30

Jasper

75,717
14
151
146

Okay, this makes a lot of sense. I'm actually trying to grab something inside of a RoR partial. Based on your comment and the thread above, I suspect the selector is being called before the partial has properly rendered. What's the best way to prevent this? – Adam Templeton Dec 03 '12 at 21:35
@AdamTempleton The `
` in your output is a DOMElement (notice how it doesn't have a key, it's an array index as in my answer). So your selector is probably working. You can use `console.log($('.fail_vid').length);` to see if you are selecting anything.
– Jasper Dec 03 '12 at 21:36
@Jasper Wouldn't `.eq(0)` just give you another jQuery object? – Andrew Dec 03 '12 at 21:38

score 2 · Answer 2 · edited May 23 '17 at 11:46

The output you're seeing is simply a representation of the jQuery object returned by the $('.fail_vid') statement.

If you want the actual DOM element, use the .get() method to retrieve it:

$('.fail_vid').get(0)

You can also access the array of elements directly, like so:

$('.fail_vid')[0]

This only retrieves the first DOM element selected by your selector. If your selector selects more than one DOM element, subsequent elements can be retrieved at higher indices. You can also retrieve all elements at once, as an array, by calling .get() without any arguments.

Related question: How to get a DOM Element from a JQuery Selector

To make sure the script is executed only after all DOM elements are loaded, you can either include the script at the end of your document, or use $(document).ready().

JQuery selector not grabbing element

2 Answers2