从父div改变子img元素的样式？

Question

所以我有

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

然后我有一个简单的javascript

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

第一行的javascript工作正常，但第二行返回

下面的例外

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

我认为两者都假设返回相同的对象，但显然第二个甚至没有返回一个元素对象，任何想法？ 感谢..

Answer 1

使用数组表示法提取 DOMElement ，而不是jquery对象！
所以你不能在提取的元素上使用jquery。

尝试使用.first()：

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

或:eq()选择器：

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

当您收到错误消息时，通常是因为这种问题。

Answer 2

使用[0]访问DOM对象，而不是jQuery对象。这将导致错误，因为DOM没有定义jQuery函数。

.eq(x)或.first() / .last()等返回jQuery对象。

试试这个：

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

Answer 3

$("#image_container").children("img")[0]是一个DOM元素，而不是jQuery对象，所以你不能使用jQuery方法。

请尝试$("#image_container").children("img").first()。

Answer 4

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

或更好：

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

Answer 5

发生错误，此行返回HTML元素，而不是由jQuery包装

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

如果你改变行以使用jQuery，那么它将会是这样的

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

像魅力一样工作; - ）

Answer 6

你可以使用nth-child()选择器，只记得它是一个基础1数组，不像大多数基数为0的JavaScript数组：

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