第二張圖片後不能添加東西與jquery

我無法弄清楚如何在頁面上的第二個圖像後添加HTML。我的代碼工作正常，如果我的目標是<p>,<div>或其他什麼，但不是圖像。第二張圖片後不能添加東西與jquery

我在控制檯中沒有得到任何錯誤。

這裏我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>

有人可以幫助我在這一個？解決方案必須非常簡單，但我無法弄清楚。

來源

2014-10-11 Bruno Hug

您是否需要將div中的_every_第二圖像或第二張圖像作爲目標？ – MrCode 2014-10-11 16:49:22

使用:eq(1)選擇第二img標籤和使用after()

$("#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>

來源

2014-10-11 16:48:10

它的工作，謝謝，但只有在像這樣$（「＃blog-main >> img：eq（1）」）添加另一個「>」之後。不知道爲什麼 – 2014-10-11 19:33:48

:nth-child()尋找#blog-main中的所有元素，而不僅僅是img。改爲使用:eq()：

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

更新。是的，我忘了，你需要經過<img>添加元素，不進去，所以它應該是，例如，.after()而不是.append()：

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

Fiddle。

來源

2014-10-11 16:47:24 Regent

或者img標籤後，將內容添加到使用:eq()，你也可以使用:nth-of-type()：

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

Fiddle

來源

2014-10-11 16:50:41

第二張圖片後不能添加東西與jquery

回答

相關問題