將HTML附加到div（如果不存在）
[英]Append HTML to div if it doesn't exist
問題描述
我需要檢查元素是否存在，如果不存在，請使用Jquery創建它。 例如，我的頁面中包含以下HTML代碼：
<div class="g-array-item">
<div class="g-array-item-image">Awesome Picture</div>
<div class="g-array-item-somethingelse">Something else</div>
</div>
<div class="g-array-item">
<div class="g-array-item-somethingelse">Something else</div>
</div>
我需要在兩個g-array-item類div中都包含g-array-item g-array-item-image類div。
到目前為止，這是我沒有成功嘗試過的事情：
if(jQuery(".g-array-item-image").length < 0 ){
jQuery( '.g-array-item' ).append( jQuery( '<div class="g-array-item-image">123</div>' ) );
}
所需結果：
<div class="g-array-item">
<div class="g-array-item-image">Awesome Picture</div>
<div class="g-array-item-somethingelse">Something else</div>
</div>
<div class="g-array-item">
<div class="g-array-item-image">Awesome Picture</div>
<div class="g-array-item-somethingelse">Something else</div>
</div>
3 個解決方案
解決方案1
1 已采納 2018-03-13 08:10:49
這是完整的代碼：
<div class="g-array-item">
<div class="g-array-item-image">Awesome Picture</div>
<div class="g-array-item-somethingelse">Something else</div>
</div>
<div class="g-array-item">
<div class="g-array-item-somethingelse">Something else</div>
</div>
<script
src="https://code.jquery.com/jquery-3.3.1.min.js"
integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8="
crossorigin="anonymous"></script>
<script type="text/javascript">
$(document).ready(function(){
$('.g-array-item').each(function(){
if($(this).find('.g-array-item-image').length == 0){
$(this).prepend('<div class="g-array-item-image">123</div>');
}
});
});
</script>
您需要在此處使用prepend而不是append否則它將在項目放置之后彈出image div。
解決方案2
0 2018-03-13 08:13:58
它有一個簡單的解決方案：
- 請與類元素
g-array-item-image，其具有類每個元素g-array-item - 如果元素不存在，則長度與類元素
g-array-item-image將是0，你可以prepend()它把它在里面DIV頂層帶班g-array-item
$(document).ready(function(){ $('.g-array-item').each(function(){ if($(this).find('.g-array-item-image').length === 0){ $(this).prepend('<div class="g-array-item-image">123</div>'); } }); });
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div class="g-array-item"> <div class="g-array-item-image">Awesome Picture</div> <div class="g-array-item-somethingelse">Something else</div> </div> <div class="g-array-item"> <div class="g-array-item-somethingelse">Something else</div> </div>
解決方案3
0 2018-03-13 08:22:51
<!-- To change this template, choose Tools | Templates and open the template in the editor. --> <!DOCTYPE html> <html> <head> <title></title> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> </head> <body> <div class="g-array-item"> <div class="g-array-item-image">Awesome Picture</div> <div class="g-array-item-somethingelse">Something else</div> </div> <div class="g-array-item"> <div class="g-array-item-somethingelse">Something else</div> </div> <script> jQuery(document).ready(function() { jQuery(".g-array-item").each(function() { if (!(jQuery(this).children('.g-array-item-image').hasClass('g-array-item-image'))) { jQuery(this).append('<div class="g-array-item-image">123</div>'); } }); }); </script> </body> </html>
每個簡單的方法如下。
jQuery(".g-array-item").each(function() {
console.log(jQuery(this).children('.g-array-item-image').attr('class'));
if (!(jQuery(this).children('.g-array-item-image').hasClass('g-array-item-image'))) {
jQuery(this).append('<div class="g-array-item-image">123</div>');
}
});
附加HTML元素（如果尚不存在）
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.