Question

我无法弄清楚如何在页面上的第二张图片后添加html。如果我定位<p>，<div>或其他什么，而不是图片，我的代码工作正常。

我在控制台中没有收到任何错误。

这是我的JS： $("#blog-main > img:nth-child(2)").append("<div>inserted div</div>");

html就像这样：

<div class="col-sm-8 blog-main" id="blog-main">
<p></p>
<img src="" />
<p></p>
<img src="" />
</div>

有人可以帮我这个吗？解决方案必须非常简单，但我无法理解。

Answer 1

使用 :eq(1) 选择第二个img标记，并使用 after() 在img标记后添加内容

 $("#blog-main > img:eq(1)").after("<div>inserted div</div>");

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<div class="col-sm-8 blog-main" id="blog-main">
  <p></p>
  <img src="" />
  <p></p>
  <img src="" />
</div>

Answer 2

:nth-child()查找#blog-main内的所有元素，而不仅仅是img。请改用:eq()：

$("#blog-main > img:eq(1)").append("<div>inserted div</div>");

更新。是的，我忘了您需要在 <img>之后添加元素，而不是在其中，因此它应该是.after()而不是.append()：< / p>

$("#blog-main > img:eq(1)").after("<div>inserted div</div>");

Fiddle

Answer 3

除了使用:eq()之外，您还可以使用:nth-of-type()：

$("#blog-main > img:nth-of-type(2)").append("<div>inserted div</div>");

Fiddle

使用jquery在第二个图像之后无法添加内容

3 个答案: