javascript - 使用 jquery 动态添加一个 div

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>

谢谢大家..

fiddle Here

Answer 1

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

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

演示 here