javascript - 替换具有相同类名的元素

Question

这个问题已经有答案了:

How to get nth jQuery element (11 个回答)

已关闭 5 年前。

我有 3 个图像都在同一个类名“image”内

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="imageHolder" style="width: 80%; display:  inline;">
	<div class="image">
		<img src="//i.stack.imgur.com/nO2hl.png">
	</div>
	<div class="image">
		<img src="//i.stack.imgur.com/IkjJW.png">
	</div>
	<div class="image">
		<img src="//i.stack.imgur.com/QrKSV.png">
	</div>
</div>

我只想用不同的图像链接替换第二张图像。所以我尝试了这样的事情:

$('.image').find('img').attr('src', 'http://cdn.shopify.com/s/files/1/1061/1924/products/Smiling_Face_Emoji_with_Blushed_Cheeks_grande.png?v=1480481056');

但是，这会替换所有图像，而不仅仅是第二个图像，所以我尝试这样做 $('.image')[1].find(..)... ，但这不起作用我收到错误:Uncaught TypeError: $(...)[1].find is not a function .

如果有人能解释我做错了什么以及如何解决这个问题，我将不胜感激？

谢谢。

Answer 1

您已经非常接近了 - find() 将返回一个数组，并且您希望将更改应用于单个元素:

$($('.image').find('img')[1]).attr('src', 'http://cdn.shopify.com/s/files/1/1061/1924/products/Smiling_Face_Emoji_with_Blushed_Cheeks_grande.png?v=1480481056');

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="imageHolder" style="width: 80%; display:  inline;">
	<div class="image">
		<img src="//i.stack.imgur.com/nO2hl.png">
	</div>
	<div class="image">
		<img src="//i.stack.imgur.com/IkjJW.png">
	</div>
	<div class="image">
		<img src="//i.stack.imgur.com/QrKSV.png">
	</div>
</div>

https://api.jquery.com/find/