0

Suppose I have a div tag like this:

<div id="group-dialog" class="modal-dialog">

Now I want to grab it as a jQuery object (in this case so I can run .dialog()).

When I try this:

var gDialog = $('#group-dialog');

I get an array back (!!).

Why am I getting an array? Isn't the point of having an ID attribute that there's only one? I can see getting multiple p's or .my-css-thing back ...

Next question:

I have this array with 1 object in it that I now want to access as a jQuery object.

When I do this:

$(gDialog[0])

And pull it up in F12, I still have an array!! I thought I de-referenced the array already by picking the first element.

This doesn't seem to help either:

var gDialog = $('#group-dialog:first');

This is basic, but I run into this problem a lot. It seems like it used to be a lot simpler!

What is the best way to access this DOM element as a jQuery object?

micahhoover
  • 2,101
  • 8
  • 33
  • 53
  • I may not understand this, but why do you say it's an array? If you use a: console.log(typeof(gDialog)); you get "object" as a return. You can also do: console.log(typeof(gDialog[0])); and still get an object. – verjas Jul 23 '15 at 14:35
  • I have to ask. why do you care ? Most jQuery(cant really think of one that doesn't) functions work the same on 1 or 10 elements so i don't see a problem and you can just use `length ` if you need to check if there's more than 1 element – Bobby Tables Jul 23 '15 at 14:35
  • @toby: When I run .dialog() on an array I get Uncaught TypeError: $(...).dialog is not a function – micahhoover Jul 23 '15 at 14:36
  • _I get an array back (!!)_ Nope, it's just an array-like object. And because of that, the output in the console is as it would be a real array. – Andreas Jul 23 '15 at 14:37
  • That has nothing to do with your question, you probabily haven't imported jQuery.ui or something. Also **to answer you're question not problem** look at this [answer](http://stackoverflow.com/questions/7183704/jquery-id-selector-id-returns-array) – Bobby Tables Jul 23 '15 at 14:38
  • 2
    `.dialog()` is not part of jQuery. This should be part of jQuery UI – Andreas Jul 23 '15 at 14:38
  • I confirm that everything works if you IMPORT the correct jQuery UI (not just jQuery): [jsfiddle](http://jsfiddle.net/aakkb5pz/2/) – verjas Jul 23 '15 at 14:42
  • @Andreas: Ah, yes. I had my dependencies switched around by someone else without my knowledge. Getting arrays back for single elements inconsistently still seems like a major flaw IMHO ... – micahhoover Aug 20 '15 at 16:08

2 Answers2

1

Answer 1
jQuery selectors always return arrays.
Selection with id attribute is a particular use case and ideally the result should be unique. However, there is nothing preventing you from having duplicated ids in a HTML document (although this is bad practice).

Answer 2
The following code will get you the first element as a DOM object:

var gDialog = $('#group-dialog')[0];

Note: you may want to check the size of the return array first.

As far as I know, there is no way to transform this DOM element back to a jQuery object. The standard use case would be to directly used $('#group-dialog') and asume that it is found and unique.

POZ
  • 583
  • 4
  • 11
  • Answer 2- thats the *actual DOM element* - not a JQuery object as the OP requested: *"What is the best way to access this DOM element as a **jQuery object**"*. You might consider linking to [`.first`](https://api.jquery.com/first/) instead – Jamiec Jul 23 '15 at 14:40
1

Try using .get(). Though I'm not sure it will work with dialog()

Retrieve the DOM elements matched by the jQuery object.

var gDialog = $('#group-dialog').get();

If you're trying to grab it to use it on a dialog, you can just put

$(document).ready(function(){
    $('#group-dialog').dialog({put options here})
});
Kelsey
  • 43
  • 2
  • 12