Javascript 使用jquery动态添加一个div

我使用下面的代码在图像下添加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>

$（文档）.ready（函数（）{
$（“.gdl blog full”）.find（“img:first child”）.after（“您正在观看100个对象中的第5个”）；
});

以及机构代码：

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

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

谢谢大家

---

小提琴

你离得太近了，只要把

: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 child”）.after（“您正在观看100个对象中的第5个”）；
------------------------------^_________^

改为

$(".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>");
------------------------------^___^

$（“.gdl blog full”）.find（“img:first”）.after（“您正在观看100个对象中的第5个”）；
------------------------------^___^

你离得太近了，只要把

: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 child”）.after（“您正在观看100个对象中的第5个”）；
------------------------------^_________^

改为

$(".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>");
------------------------------^___^

$（“.gdl blog full”）.find（“img:first”）.after（“您正在观看100个对象中的第5个”）；
------------------------------^___^

您可能希望使用选择器，例如

$（“.gdl blog full”）.find（“img:first”）

在您的代码中，所有图像都是

div.gdl-blog-full

的第一个子项，因此您可以使用

.first（）

或选择器

：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>");
------------------------------^_________^

Demo

您可能希望改用选择器，如

$（“.gdl blog full”）。查找（“img:first”）

在您的代码中，所有图像都是

div.gdl-blog-full

的第一个子项，因此您可以使用

.first（）

或选择器

：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>");
------------------------------^_________^

---

演示

：第一个子图像

不起作用，因为第二个图像是

的第一个子图像，所以它与选择器匹配。
：第一个子图像
不起作用，因为第二个图像是
的第一个子图像，所以它与选择器匹配。