如果小于。长度的条件不能正常工作

Question

我制作了一个脚本，其中#hsz-wrap2附加到最后一个可见的div，当{{1}内的div数低于或等于 16 时，它应该会消失} div。

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

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

为什么会这样？我错过了什么？

if

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();
  });

});

Answer 1

在计算divs长度之前你附加了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>