在div中找到第一個img，然后在其下方放置一個新的div
[英]Find the first img inside a div and place a new div below it
問題描述
我正在嘗試使用下面的代碼在jQuery的圖像下方放置一個div，但是它不起作用。
在<head>我有以下代碼：
<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>
在<body>里面，我有這個：
<div class="gdl-blog-full">
<img src="logoF.png" width="400" height="93" />
</div>
我只想在圖像下方放置一個<div> 。
5 個解決方案
解決方案1
3 2013-10-04 19:54:26
像這樣 ：
$('.gdl-blog-full>img:first-child').after("<div>hello</div>");
解決方案2
0 2013-10-04 19:45:26
使用$ .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>');
解決方案3
0 2013-10-04 19:45:35
使用.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>");
解決方案4
0 2013-10-04 19:48:35
不應該在之后
<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>
解決方案5
0 2013-10-04 19:54:05
使用.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");
使用querySelector查找img並將其顯示在新的div中
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.