javascript - JQuery - 如果子 div 没有相似或类似的数据属性，则隐藏父 div

Question

当用户输入机场并且该国家/地区没有相似的机场名称时，我想隐藏国家/地区名称。

$(document).ready(function() {
  $('#from').focus();
  $('#from').on("keyup", function() {
    $(".wrap-airport-from").animate({
      scrollTop: 0
    }, "fast");
    if ($(this).val()) {
      var input = $(this).val().toLowerCase();
      console.log(input);
      //alert(input);
      $(".airport-from").hide();
      $(".airport-from[data-kode*='" + input + "']").show();
    } else {
      $(".airport-from").show();
    }
  });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="text" id="from">
<div class="wrap-airport-from">
  <div class="list-country">
    <b>Indonesia</b>
    <div class="list-airport">
      <a href="#" class="airport-from" data-kode="jakarta">Jakarta</a>
    </div>
  </div>
  <div class="list-country">
    <b>Australia</b>
    <div class="list-airport">
      <a href="#" class="airport-from" data-kode="sidney">Sidney</a>
    </div>
  </div>
</div>

上面的代码只隐藏机场名称，仍然显示国家

Answer 1

您可以使用 jQuery 函数 .parents() 来选择和隐藏相应的父元素。

$(document).ready(function() {
  $('#from').focus();
  $('#from').on("keyup", function() {
    $(".wrap-airport-from").animate({
      scrollTop: 0
    }, "fast");
    if ($(this).val()) {
      var input = $(this).val().toLowerCase();
      console.log(input);
      //alert(input);
      $(".airport-from").hide();
      $(".airport-from").parents('.list-country').hide();
      $(".airport-from[data-kode*='" + input + "']").parents('.list-country').show();
      $(".airport-from[data-kode*='" + input + "']").show();
    } else {
      $(".airport-from").show();
      $(".airport-from").parents('.list-country').show();
    }
  });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="text" id="from">
<div class="wrap-airport-from">
  <div class="list-country">
    <b>Indonesia</b>
    <div class="list-airport">
      <a href="#" class="airport-from" data-kode="jakarta">Jakarta</a>
    </div>
  </div>
  <div class="list-country">
    <b>Australia</b>
    <div class="list-airport">
      <a href="#" class="airport-from" data-kode="sidney">Sidney</a>
    </div>
  </div>
</div>