2

以下のコードを使用して画像の下に div を追加していますが、問題は、複数の画像がある場合、スクリプトが各画像の下に div を追加することです。したがって、最初の画像の下に 1 つの 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

4

2 に答える 2

2

あなたはとても近くにいます: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>");
------------------------------^___^
于 2013-10-05T11:23:52.183 に答える
2

次のように、代わりに:firstセレクターを使用することをお勧めします。$(".gdl-blog-full").find("img:first")

コードでは、すべての画像は の最初の子であるため、またはセレクターdiv.gdl-blog-fullを使用できます.first():first

デモはこちら

于 2013-10-05T11:23:55.230 に答える