javascript - if 小于 on .length 的条件不能精确工作

Question

我制作了一个脚本，其中 #hsz-wrap2 附加到最后一个可见的 div，当 div 数量低于或等于 16 在 #snapshot_vertical div 内。

但是，if 条件的工作方式我不明白。

添加第 16 个 div 时，代码片段中的 div 不应出现!

为什么会发生这种情况？我缺少什么？

jQuery(document).ready(function($) {

  $('#snapshot_vertical > div').hide();
  $('#snapshot_vertical > div:lt(16)').show();


  $("#snapshot_vertical").append('<div style="font-size: 16px;text-align: center" id="hsz-wrap2"><span style="display: block;" id="megtobb-hsz2">Mégtöbb termék</span><br/><i class="fa fa-angle-down" aria-hidden="true"></i><br/><span>Összesen még ' + ($("#snapshot_vertical > div").filter(":hidden").size()) + ' termék </span></div>');

  if ($('#snapshot_vertical > div').length <= 16) {

    $('#snapshot_vertical > div').show();
    $('#hsz-wrap2').hide();

  }
  $('#hsz-wrap2').click(function() {
    $('#snapshot_vertical > div').show();
    $(this).hide();
  });

});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="snapshot-list-container">
  <div class="snapshot_vertical list grid-style list_with_divs" id="snapshot_vertical">
    <div class="product-snapshot list_div_item">1.</div>
    <div class="product-snapshot list_div_item">2.</div>
    <div class="product-snapshot list_div_item">3.</div>
    <div class="product-snapshot list_div_item">4.</div>
    <div class="product-snapshot list_div_item">5.</div>
    <div class="product-snapshot list_div_item">6.</div>
    <div class="product-snapshot list_div_item">7.</div>
    <div class="product-snapshot list_div_item">8.</div>
    <div class="product-snapshot list_div_item">9.</div>
    <div class="product-snapshot list_div_item">10.</div>
    <div class="product-snapshot list_div_item">11.</div>
    <div class="product-snapshot list_div_item">12.</div>
    <div class="product-snapshot list_div_item">13.</div>
    <div class="product-snapshot list_div_item">14.</div>
    <div class="product-snapshot list_div_item">15.</div>
    <!--<div class="product-snapshot list_div_item">16.</div>--><!-- if you put this in the hsz-wrap2 appears, which is not normal (?) -->
  </div>
</div>

Answer 1

您在计算 div 长度之前附加了 id="hsz-wrap2" div ..所以您的 16 个 div + 附加的 div = 17 而不是 16 ..您可以在附加 div 之前获取 div 长度，如下所示

jQuery(document).ready(function($) {

  $('#snapshot_vertical > div').hide();
  $('#snapshot_vertical > div:lt(16)').show();
  var length = $('#snapshot_vertical > div').length;

  $("#snapshot_vertical").append('<div style="font-size: 16px;text-align: center" id="hsz-wrap2"><span style="display: block;" id="megtobb-hsz2">Mégtöbb termék</span><br/><i class="fa fa-angle-down" aria-hidden="true"></i><br/><span>Összesen még ' + ($("#snapshot_vertical > div").filter(":hidden").size()) + ' termék </span></div>');
	//alert($('#snapshot_vertical > div').length);
  if (length <= 16) {

    $('#snapshot_vertical > div').show();
    $('#hsz-wrap2').hide();

  }
  $('#hsz-wrap2').click(function() {
    $('#snapshot_vertical > div').show();
    $(this).hide();
  });

});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="snapshot-list-container">
  <div class="snapshot_vertical list grid-style list_with_divs" id="snapshot_vertical">
    <div class="product-snapshot list_div_item">1.</div>
    <div class="product-snapshot list_div_item">2.</div>
    <div class="product-snapshot list_div_item">3.</div>
    <div class="product-snapshot list_div_item">4.</div>
    <div class="product-snapshot list_div_item">5.</div>
    <div class="product-snapshot list_div_item">6.</div>
    <div class="product-snapshot list_div_item">7.</div>
    <div class="product-snapshot list_div_item">8.</div>
    <div class="product-snapshot list_div_item">9.</div>
    <div class="product-snapshot list_div_item">10.</div>
    <div class="product-snapshot list_div_item">11.</div>
    <div class="product-snapshot list_div_item">12.</div>
    <div class="product-snapshot list_div_item">13.</div>
    <div class="product-snapshot list_div_item">14.</div>
    <div class="product-snapshot list_div_item">15.</div>
    <div class="product-snapshot list_div_item">16.</div>
  </div>
</div>