jQuery -如果div高度大于指定高度，则在div后面添加html，但如果低于指定高度，则不要添加

Question

因此，如果另一个div (..class 3)的高度大于jQuery中的指定高度，我尝试使用jQuery在div (..class 2)之后添加html。但是，如果div的高度小于jQuery中指定的高度，则不应该添加html。

我列举了一个例子，说明到目前为止我所取得的成就。然而，该代码在Firefox (本地版本)中工作，但在代码页或代码段中不起作用。所以，我也不确定这是否正确？

​

$(document).ready(function(){
  
  if ($(".class-3").height() > 85) {
    $(".class-2").after("<button class='btnstyle'>Button</button>");
  }
  
});

.class-3 {
  height: auto;
}

<div class="class-1">
  <p><b>This divs height is more than 85px</b></p>
  <div class="class-2">
    <div class="class-3">
      Lorem ipsum<br/><br/>
      Lorem ipsum<br/><br/>
      Lorem ipsum<br/><br/>
      Lorem ipsum<br/><br/>
      Lorem ipsum<br/><br/>
      Lorem ipsum<br/><br/>
    </div>
  </div>
</div>

<div class="class-1">
  <p><b>This divs height is less than 85px</b></p>
  <div class="class-2">
    <div class="class-3">
      Lorem ipsum<br/><br/>
      Lorem ipsum<br/><br/>
    </div>
  </div>
</div>

<div class="class-1">
  <p><b>This divs height is more than 85px</b></p>
  <div class="class-2">
    <div class="class-3">
      Lorem ipsum<br/><br/>
      Lorem ipsum<br/><br/>
      Lorem ipsum<br/><br/>
      Lorem ipsum<br/><br/>
      Lorem ipsum<br/><br/>
      Lorem ipsum<br/><br/>
    </div>
  </div>
</div>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>

​

当我学习jquery时，这就是我经过多次尝试和错误后得出的结果。但是，我无法获得第二个事件“如果div小于85，请不要添加html”来工作。

这是因为我对jQuery的理解不是很好，而且我还在学习，所以我不明白怎么做。

我试过在Stackoverflow和互联网上搜索，但是没有运气，我自己也没有取得任何成果。

任何帮助都将不胜感激。此外，我还添加了一个指向钢笔的链接，这里的代码相同：https://codepen.io/DeltaZero99/pen/oNYPowJ

更新:修正了类命名和pen的错误，用新的jQuery代码更新了提供的答案。

Answer 1

使用$(". Class-3")，您可以得到该类所有元素的列表，正如您可以想象的那样，每个元素都有不同的不同之处。

因此，您必须使用jQuery的每个函数或任何其他循环(例如FOR循环)浏览每个单个元素。:)

​

$(function(){
  $(".class-3").each(function(){ // Analyze all the items found 
  if ($(this).height() > 85) { // Check if the element height is greater than 85 
    $(this).parents(".class2") // I am looking for the parent element class-2 
        .after("<button class='btnstyle'>Button</button>"); // I add the HTML code 
  }
  }); 
});

.class1 {
    background: #ffe4e4;
    margin-bottom: 20px;
}

.class-3 {
    background: #e1fff4;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="class1">
  <p><b>This divs height is more than 85px</b></p>
  <div class="class2">
    <div class="class-3">
      Lorem ipsum<br/><br/>
      Lorem ipsum<br/><br/>
      Lorem ipsum<br/><br/>
      Lorem ipsum<br/><br/>
      Lorem ipsum<br/><br/>
      Lorem ipsum<br/><br/>
    </div>
  </div>
</div>

<div class="class1">
  <p><b>This divs height is less than 85px</b></p>
  <div class="class2">
    <div class="class-3">
      Lorem ipsum<br/><br/>
      Lorem ipsum<br/><br/>
    </div>
  </div>
</div>

<div class="class1">
  <p><b>This divs height is more than 85px</b></p>
  <div class="class2">
    <div class="class-3">
      Lorem ipsum<br/><br/>
      Lorem ipsum<br/><br/>
      Lorem ipsum<br/><br/>
      Lorem ipsum<br/><br/>
      Lorem ipsum<br/><br/>
      Lorem ipsum<br/><br/>
    </div>
  </div>
</div>

​