Find the first img inside a div and place a new div below it

Question

I am trying to place a div below an image with jquery using the code below but it doesnt work.

in the <head> i have this code:

<script type="text/javascript">
$( document ).ready(function() {
$(".gdl-blog-full").find("img").prepend("<div id='1' style='width:400px; float: left; margin-top:10px; background-color: #000;'> You are watching 5th object out of 100 </div>");
});
</script>

and inside the <body> i have this:

<div class="gdl-blog-full">
<img src="logoF.png" width="400" height="93" />
</div>

I just want to place a <div> below the image..

Answer 1

像这样：

    $('.gdl-blog-full>img:first-child').after("<div>hello</div>");

Answer 2

使用$ .after

$('.gdl-blog-full').find('img:first-child').after('<div id='1' style='width:400px; float: left; margin-top:10px; background-color: #000;'> You are watching 5th object out of 100 </div>');

Answer 3

使用.after将元素放置在指定元素之后，也使用:first-child获得第一个图像：

$(".gdl-blog-full").find("img:first-child").after("<div id='1' style='width:400px; float: left; margin-top:10px; background-color: #000;'> You are watching 5th object out of 100 </div>");

Answer 4

not prepend it should be after

<script type="text/javascript">
$( document ).ready(function() {
$(".gdl-blog-full").find("img").after("<div id='1' style='width:400px; float: left; margin-top:10px; background-color: #000;'> You are watching 5th object out of 100 </div>");
});
</script>

Answer 5

使用.insertAfter将元素放在另一个之后。

$("<div id='1' style='width:400px; float: left; margin-top:10px; background-color: #000;'> You are watching 5th object out of 100 </div>").insertAfter(".gdl-blog-full img:first-child");

Find the first img inside a div and place a new div below it

Question

5 answers

solution1
3 2013-10-04 19:54:26

solution2
0 2013-10-04 19:45:26

solution3
0 2013-10-04 19:45:35

solution4
0 2013-10-04 19:48:35

solution5
0 2013-10-04 19:54:05

Find the first img inside a div and place a new div below it

Question

5 answers

solution1 3 2013-10-04 19:54:26

solution2 0 2013-10-04 19:45:26

solution3 0 2013-10-04 19:45:35

solution4 0 2013-10-04 19:48:35

solution5 0 2013-10-04 19:54:05

solution1
3 2013-10-04 19:54:26

solution2
0 2013-10-04 19:45:26

solution3
0 2013-10-04 19:45:35

solution4
0 2013-10-04 19:48:35

solution5
0 2013-10-04 19:54:05