jQuery in console not working properly

Question

I'm using the jQueryify bookmarklet on a page so that I can call jQuery functions from the console. But everytime I invoke a jQuery function on a selected object, I get the error:

"TypeError: jQuery("li")[0].children[0].html is not a function
[Break On This Error] jQuery('li')[0].children[0].html();

I have tried this in FireBug as well as Google Chrome's Webkit console.

Answer 1

You are no longer working with jQuery objects when using square braces.

jQuery("li")[0]

This returns you the 1st li as a DOMElement, not a jQuery object.

jQuery("li")[0].children[0]

This returns the 1st li 's 1st child as a DOMElement, not a jQuery object.

.html()

This function only works for jQuery objects. For DOMElements, you can use the .innerHTML property.

I suggest instead of dealing with DOMElements, you should continue working with jQuery objects. Try using this instead:

jQuery('li').eq(0).children().eq(0).html()

Answer 2

It looks like you are trying to call a jQuery function, html , on a DOM object children[0] . Try wrapping that in a jQuery object and then calling html

var temp = jQuery("li")[0].children[0];
var html = jQuery(temp).html();

Answer 3

Check the result of jQuery("li")[0].children[0] , it's a regular DOM object NOT a jQuery object. Without seeing your HTML i can't recommend a better selector but a cheap and dirty fix would be

jQuery(jQuery('li')[0].children[0]).html();

This will convert the DOM object result into a jQuery object which has the .html() function.

Answer 4

Try following

jQuery(jQuery("li")[0].children[0]).html();

or better one

jQuery("li:eq(0)").children(':eq(0)').html();

or another one

jQuery("li:eq(0)").children().eq(0).html();

even this one will work

jQuery("li").eq(0).children().eq(0).html();

Answer 5

Accessing the array elements on the jquery object (using []) returns a DOMElement, which obviously doesn't have jquery's methods. You probably want to use eq() instead.