JQuery

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()来select隐藏对应的父元素

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

Answer 2

$(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);
   $(".list-country").hide();
   $(".airport-from[data-kode*='"+ input +"']").parents('.list-country').show();
  }else{
   $(".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>
            <a href="#" class="airport-from" data-kode="bali">Bali</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>

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

JQuery - Hide parent div if child div haven't similar or like data attribute

html

javascript

show-hide