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>

谢谢你们..

小提琴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

演示在这里