javascript - 如何使用 jQuery 隐藏/显示父元素

Question

我有一个jquery过滤器，可以过滤包含隐藏在input#box中的字符串的元素。我已将首字母添加到 HTML 中，并且想在隐藏所有包含的元素时隐藏它们。我尝试了 jQuery parents 和 closest 的几种组合，但没有成功......

$('#box').keyup(function() {
  var valThis = $(this).val().toLowerCase();
  if (valThis == "") {
    $('.indicazione').show();
  } else {
    $('.indicazione').each(function() {
      var text = $(this).text().toLowerCase();
      if (text.indexOf(valThis) >= 0) {
        $(this).show();
      } else {
        $(this).hide();
        $(this).parents('.indicazione_wrapper').hide(); /*This Line doesn't work*/
      }
    });
  };
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="row">
  <div class="col-sm-12 mt-5 mb-3">
    <input id="box" type="text" />
  </div>
</div>
<div class="row">
  <div class="col-sm-12 mt-3" id="lettera"><strong>A</strong></div>
  <div class="col-sm-4 col-md-3 d-flex indicazione_wrapper">
    <div class="card card-body flex-fill my-3">
      <a class="indicazione" href="#">AAA</a>
    </div>
  </div>
  <div class="col-sm-4 col-md-3 d-flex indicazione_wrapper">
    <div class="card card-body flex-fill my-3">
      <a class="indicazione" href="#">ABC</a>
    </div>
  </div>
  <div class="col-sm-4 col-md-3 d-flex indicazione_wrapper">
    <div class="card card-body flex-fill my-3">
      <a class="indicazione" href="#">CDE</a>
    </div>
  </div>
  <div class="col-sm-12 mt-3" id="lettera"><strong>B</strong></div>
  <div class="col-sm-4 col-md-3 d-flex indicazione_wrapper">
    <div class="card card-body flex-fill my-3">
      <a class="indicazione" href="#">BBB</a>
    </div>
  </div>
  <div class="col-sm-4 col-md-3 d-flex indicazione_wrapper">
    <div class="card card-body flex-fill my-3">
      <a class="indicazione" href="#">ABC</a>
    </div>
  </div>
  <div class="col-sm-4 col-md-3 d-flex indicazione_wrapper">
    <div class="card card-body flex-fill my-3">
      <a class="indicazione" href="#">CDE</a>
    </div>
  </div>
</div>

Answer 1

您的代码工作得很好，只是您调用了 $(this).parents('.indicazione_wrapper').hide() 来隐藏该元素，但随后您再也没有显示过它。

我在这部分添加了 .indicazione_wrapper 选择器

if (valThis == "") {
    $('.indicazione, .indicazione_wrapper').show(); 
  } else { ...

然后我添加了一些背景颜色来显示正确的元素正在隐藏和显示。

$('#box').keyup(function() {
  var valThis = $(this).val().toLowerCase();
  if (valThis == "") {
    $('.indicazione, .indicazione_wrapper').show(); 
  } else {
    $('.indicazione').each(function() {
      var text = $(this).text().toLowerCase();
      if (text.indexOf(valThis) >= 0) {
        $(this).show();
      } else {
        $(this).hide();
        $(this).parents('.indicazione_wrapper').hide(); /*This Line doesn't work*/
      }
    });
  };
});

.indicazione_wrapper {
  background: lightblue;
}

.indicazione {
  background: pink;
  }

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="row">
  <div class="col-sm-12 mt-5 mb-3">
    <input id="box" type="text" />
  </div>
</div>
<div class="row">
  <div class="col-sm-12 mt-3" id="lettera"><strong>A</strong></div>
  <div class="col-sm-4 col-md-3 d-flex indicazione_wrapper">
    <div class="card card-body flex-fill my-3">
      <a class="indicazione" href="#">AAA</a>
    </div>
  </div>
  <div class="col-sm-4 col-md-3 d-flex indicazione_wrapper">
    <div class="card card-body flex-fill my-3">
      <a class="indicazione" href="#">ABC</a>
    </div>
  </div>
  <div class="col-sm-4 col-md-3 d-flex indicazione_wrapper">
    <div class="card card-body flex-fill my-3">
      <a class="indicazione" href="#">CDE</a>
    </div>
  </div>
  <div class="col-sm-12 mt-3" id="lettera"><strong>B</strong></div>
  <div class="col-sm-4 col-md-3 d-flex indicazione_wrapper">
    <div class="card card-body flex-fill my-3">
      <a class="indicazione" href="#">BBB</a>
    </div>
  </div>
  <div class="col-sm-4 col-md-3 d-flex indicazione_wrapper">
    <div class="card card-body flex-fill my-3">
      <a class="indicazione" href="#">ABC</a>
    </div>
  </div>
  <div class="col-sm-4 col-md-3 d-flex indicazione_wrapper">
    <div class="card card-body flex-fill my-3">
      <a class="indicazione" href="#">CDE</a>
    </div>
  </div>
</div>