JQuery methods and DOM properties

Question

I am confused as to when I can use the DOM properties and when I could use the Jquery methods on a Jquery object. Say, I use a selector

var $elemSel = $('#myDiv').find('[id *= \'select\']')

At this point, $elemSel is a jquery object which I understand to be a wrapper around the array of DOM elements. I could get a reference to the DOM elements by iterating through the $elemSel object/array (Correct?)

My questions: 1. Is there a way to convert this $elemSel into a non JQuery regular array of DOM elements? 2. Can I combine DOM properties and JQuery methods at the same time (something like this)

$elemSel.children('td').nodeName

(nodeName is DOM related, children is JQuery related)

EDIT: What's wrong with this?

$elemSel.get(0).is(':checked')

EDIT 2:

Thanks for the responses. I understand now that I can use the get(0) to get a DOM element. Additional questions:

1. How would I convert a DOM element to a JQuery object?

2. If I assign "this" to a variable, is that new var DOM or JQuery? If it's JQuery, how can I convert this to a DOM element? (Since I can't use get(0))

   var $elemTd = $(this);

3. When I do a assignment like the one above, I have seen some code samples not include the $ sign for the variable name. Why?

4. And as for my original question, can I combine the DOM properties and JQuery functions at the same time on a JQuery object?

   $elemSel.children('td').nodeName

Answer 1

You'll need to .get(0) the result to get the DOM-ready object.

var myBox = $("div#myBox");
alert(myBox.get(0).id); // "myBox"

Read "Peeling Away the jQuery Wrapper and Finding an Array" by Cody Lindley

---

Re: Edit: .is() is not a native javascript method. When you run .get(0), you are no longer working off of the jQuery object, therefore you cannot expect to run jQuery methods from it.

If you want to run .is() on a specific result, use the :eq(index) selector, or the .eq(index) method:

$("div:eq(1)").is(":checked"); // gets second div
$("div").eq(1).is(":checked"); // gets second div

---

Re: Edit # 2

Bob, you really should create new questions, rather than asking more and more here.

Converting a dom element to jquery object is done by passing it in a selector:

var myBox = document.createElement("div");
var myBoxJQ = $(myBox);

Assinging This to a variable. Depends on when you do it. If by "this" you're referring to a jQuery object, then this will be a jQuery object. You can convert it by following this with .get(0).

When this is referring to a jQuery object, you don't need to wrap it in the $(). This is redundant.

And lastly, $elemSel.children('td').nodeName can be done like this: $elemSel.children('td')[0].nodeName or $elemSel.children('td').get(0).nodeName, where the 0 is the index of which item to access.

Answer 2

Because there can be more than one match in jQuery selectors you need to get the elements out of the "array".

You can use the get method to return a single DOM element or an array or DOM elements.

eg:

var elims = $("div").get();
for(var i in elims)
    alert(elims[i].nodeName);

Edit:

$elemSel.get(0).is(':checked') will not work because you are getting the Dom object and then trying to use jQuery functions on it. If you want to get a single jQuery element use eq.

$elemSel.eq(0).is(':checked');

Answer 3

There is also a shortcut for get(index) function:

$(selector)[0].nodeName

Soruce: http://docs.jquery.com/Core/get#index

Answer 4

In order to call native DOM method you can use get(index). Or if you want to use jQuery Object method, you should wrap a native DOM element with jQuery, which will convert the DOM element into a jQuery Object, so all the methods will be available. http://www.linxinshan.com/?p=339