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()来选择和隐藏相应的父元素。

＆＃13;

＆＃13;

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

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

Answer 2

＆＃13;

＆＃13;

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

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;