從父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');
});