时间戳

首页 > 解决方案 > 如何使用 jQuery 隐藏/显示父元素

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

问题描述

我有一个 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>

标签： javascriptjqueryhtml

解决方案

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

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

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

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

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

推荐阅读