Question

我使用下面的代码在图像下添加div，但问题是如果我有多个图像，脚本会在每个图像下面添加div ..所以我只想在第一个图像中添加一个div

<script type="text/javascript">
$( document ).ready(function() {
$(".gdl-blog-full").find("img:first-child").after("<div id='1' style='width:400px; margin-top:10px; background-color: #000;'> You are watching 5th object out of 100 </div>");
});
</script>

身体的代码：

<div class="gdl-blog-full">
<img src="1.jpg" width="675" height="383" />

<p>
<img src="2.jpg" width="479" height="246" /> </p>
</div>

谢谢大家..

小提琴Here

Answer 1

你离我很近，只需将:first-child改为:first

$(".gdl-blog-full").find("img:first-child").after("<div id='1' style='width:400px; margin-top:10px; background-color: #000;'> You are watching 5th object out of 100 </div>");
------------------------------^_________^

更改为

$(".gdl-blog-full").find("img:first").after("<div id='1' style='width:400px; margin-top:10px; background-color: #000;'> You are watching 5th object out of 100 </div>");
------------------------------^___^

Answer 2

您可能希望使用:first选择器，例如$(".gdl-blog-full").find("img:first")

在您的代码中，所有图片都是div.gdl-blog-full的第一个孩子，因此您可以使用.first()或选择器:first

演示here

使用jquery动态添加div

2 个答案: