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类div在两个g-array-item类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，否则会在您的商品之后弹出图片div。

Answer 2

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

在每个具有类g-array-item-image

g-array-item

如果该元素不存在，那么具有类g-array-item-image的元素的长度将为0，您可以prepend()将其与div中的顶级div一起使用g-array-item {1}}

$(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

3 个答案: