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.