so i have

<div style="width:500px;" id="image_container"> 
    <img src="1.jpg" id="test"alt="test" />
    <img src="2.jpg" alt="test" />
</div>

and then i have a simple javascript

$(document).ready(function (){
    $("#test").css("display","none");
    $("#image_container").children("img")[0].css("display","none"); 
});

the first line of javascript works perfectly but the second line returns the exception below

Uncaught TypeError: Object #<HTMLImageElement> has no method 'css'

i thought both were suppose to return the same object, but obviously the second one is not even returning an element object, any idea? thanks..

so i have

<div style="width:500px;" id="image_container"> 
    <img src="1.jpg" id="test"alt="test" />
    <img src="2.jpg" alt="test" />
</div>

and then i have a simple javascript

$(document).ready(function (){
    $("#test").css("display","none");
    $("#image_container").children("img")[0].css("display","none"); 
});

the first line of javascript works perfectly but the second line returns the exception below

Uncaught TypeError: Object #<HTMLImageElement> has no method 'css'

i thought both were suppose to return the same object, but obviously the second one is not even returning an element object, any idea? thanks..

• javascript
• jquery

Share Improve this question Follow asked Mar 19, 2012 at 20:17 bernabasbernabas 48111 gold badge44 silver badges1212 bronze badges 2

• You're mixing jQuery with native DOM object manipulation and we can certainly help you with the syntax to do what you describe, but can you tell us what you're really trying to acplish? – n8wrl Commented Mar 19, 2012 at 20:20
• I basically wanted to iterate through the images and change their style... I think @Jeff B below wrote what i was looking for i.e eq(x) function.. – bernabas Commented Mar 19, 2012 at 20:34

Add a ment  | 

6 Answers 6

Sorted by: Reset to default 4

Using the array notation extracts the DOMElement, not a jquery object !
So you cannot use jquery on the extracted element.

Try using .first():

$("#image_container").children("img").first().css("display","none"); 

Or the :eq() selector:

$("#image_container").children("img:eq(0)").css("display","none"); 

When you get the error message that you get, this is typically because of this kind of problems.

Using [0] accesses the DOM object, not the jQuery object. This will cause an error, as the DOM does not have jQuery functions defined.

.eq(x) or .first()/.last(), etc. return jQuery objects.

Try this:

$(document).ready(function (){
    $("#test").css("display","none");
    $("#image_container").children("img").eq(0).css("display","none"); 
});

$("#image_container").children("img")[0] is a DOM element, not a jQuery object, so you can't use jQuery methods.

Try $("#image_container").children("img").first() instead.

try $("#image_container").children("img").first().css("display","none");

or better:

$("#image_container img").first().hide();

The error occur couse this line return the HTML element, and it not wrapped by jQuery

$("#image_container").children("img")[0].css("display","none"); 
// You get an array of HTML elements and you will work with the first one.

If you change the line to use jQuery all the time it would look like this

$("#image_container img").first().css("display","none"); 

And work like a charm ;-)

You can use the nth-child() selector, just remember it is a base 1 array unlike most JavaScript arrays that are base 0:

$(function(){
    $('#image_container:nth-child(1)').css('display','none');
});