如果 HTML 不存在，则将其附加到 div

Question

我需要检查一个元素是否存在，如果不存在，则使用 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-image class div 都在 g-array-item class 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>

Answer 1

这里是完整的代码：

<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 否则它会在你的 item-something.

之后弹出图像 div

Answer 2

它有一个简单的解决方案：

在每个具有 class g-array-item

g-array-item-image

如果该元素不存在，那么带有 class g-array-item-image 的元素的长度将是 0 并且您可以 prepend() 它使其位于顶部div 内的水平 class 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>

Answer 3

<!--
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 不存在，则将其附加到 div

Append HTML to div if it doesn't exist

javascript

jquery

append

appendchild