当 CSS Grids 将元素保持在原位时，如何在 Jquery 中使用 <a> 链接过滤元素？答案

【问题标题】：How can I filter elements with <a> links in Jquery when CSS Grids keeps them in place?当 CSS Grids 将元素保持在原位时，如何在 Jquery 中使用 <a> 链接过滤元素？
【发布时间】：2018-01-21 11:41:13
【问题描述】：

所以我有一个基本的 jQuery 过滤器可以很好地过滤 div。但是，一旦我向每个 div 添加了 google map <a> 链接，它就不再起作用了。当我过滤结果时，它们会留在网格中而不是移动。所以我在网格元素之间留下了空白空间，而不是只显示过滤结果。一位朋友建议我添加隐藏类，并且我需要更改搜索输入以查找隐藏元素但我很困惑这是我的代码：

$(document).ready(function() {
  $("#myInput").on("keyup", function() {
    var value = $(this).val().toLowerCase();
    $(".box").filter(function() {
      $(this).toggle($(this).text().toLowerCase().indexOf(value) > -1)
    });
  });
});

.wrapper {
  display: grid;
  grid-template-columns: 300px 300px 300px 300px;
  grid-template-rows: 300px 300px 300px 300px;
  grid-gap: 10px;
  background-color: white;
  color: #444;
  font-family: sans-serif;
}

.hidden {
  display: none;
}

a {
  text-decoration: none;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="search">

  <input id="myInput" type="text" width="100%" placeholder="Search by 
    resort/hashtag"> </div>

<a class="hidden" href="https://www.google.com/maps/place/Avoriaz" target="_blank">
  <div id="avoriaz" class="box"> Avoriaz 1800m
    <br/>
    <p> #quiet #car-free #cheap #pool #france </p> <br/>
    <div class="green">
      31 </div>
    <div class="blue"> 122 </div>
    <div class="red"> 100 </div>
    <div class="black"> 32 </div>
  </div>
</a>
<a class="hidden" 
href="https://www.google.com/maps/place/Belle+Plagne" target="_blank"> <div 
id="belleplagne" class="box"> Belle Plagne 2500m <br/> <p> #quiet #cheap 
#car-free #pool #france </p> <br/>  <div class="green"> 12 </div> <div 
class="blue"> 128 </div> <div class="red"> 79 </div> <div class="black"> 37 
</div> </div> </a> 

<a class="hidden" href="https://www.google.com/maps/place/Chamonix-Mont-
Blanc" target="_blank"> <div id="chamonix" class="box"> Chamonix 1035m <br/> 
<p> #party #luxury <!-- #sub2hrTransfer --> #pool #michelin-star #france 
</p> <div class="green"> 6 </div> <div class="blue"> 30 </div> <div 
class="red"> 31 </div> <div class="black"> 10 </div> </div> </a> 

<a class="hidden"
href="https://www.google.com/maps/place/Jackson+Hole" target="_blank"> <div 
id="jacksonhole" class="box"> Jackson Hole 1900m <br/> <p> #party #luxury 
#usa </p> <br/>  <div class="green"> 12 </div> <div class="blue"> 46</div> 
<div class="black"> 58 </div> </div> </a> 

<a class="hidden" href="https://www.google.com/maps/place/Keystone,+CO+80435,+USA/@39.5965435,-114.8968694,5z/data=!4m5!3m4!1s0x876a5724e77c6583:0x43670c887d2ffa61!8m2!3d39.5791675!4d-105.9347384" target="_blank"> <div id="keystone" class="box"> Keystone 2800m <br/> <p> #quiet #usa </p> <br/> <div class="green"> 15 </div> <div class="blue"> 36 </div> <div class="black"> 64 </div> </div> </a> 

<a class="hidden" href="https://www.google.com/maps/place/Klosters+Parsenn/@46.8425697,7.7038304,7z/data=!4m13!1m7!3m6!1s0x4783580b64d6dee7:0x69ddf6d69d9d3cc3!2sKlosters-Serneus,+Switzerland!3b1!8m2!3d46.8699029!4d9.8828697!3m4!1s0x4784a882f146d7e9:0x78816e8ea23fc6cb!8m2!3d46.849215!4d9.8240089" target="_blank"> <div id="klosters" class="box"> Klosters 1200m <br/> <p> #party #luxury #swiss </p> <br/> <div class="blue"> 24 </div> <div class="red"> 40 </div> <div class="black"> 12 </div> </div> </a> 

<a class="hidden" href="https://www.google.com/maps/place/Tourist+Office+of+Les+2+Alpes/@44.9625404,3.9788973,7z/data=!4m13!1m7!3m6!1s0x478a12bf79d10603:0x53220c91ec9171ca!2sLes+Deux+Alpes,+38860+V%C3%A9nosc,+France!3b1!8m2!3d45.0054067!4d6.1235968!3m4!1s0x478a12c27920a0af:0x6b4c6fed54b647f0!8m2!3d45.0101178!4d6.1254975" target="_blank"> <div id="lesdeuxalpes" class="box"> Les Deux Alpes 1650m <br/> <p> #cheap #party #michelin-star #pool #france </p><br/> <div class="green"> 64 </div> <div class="blue"> 94 </div> <div class="red"> 75 </div> <div class="black"> 31 </div> </div> </    a> 


<a class="hidden" 
href="https://www.google.com/maps/place/Les+Menuires,+73440+Saint-Martin-de-
Belleville,+France/" target="_blank"> <div id="lesmenuires" class="box"> Les 
Menuires 1850m<br/> <p> #quiet #cheap #pool #france</p> <br/> <div 
class="green"> 53</div> <div class="blue"> 140 </div> <div class="red"> 112 
</div> <div class="black">34  </div> </div> </a> 

<a class="hidden" 
  
  
  
<a class="hidden" href="https://www.google.com/maps/place/Telluride+Ski+Resort/@37.9208208,-116.7986319,5z/data=!4m13!1m7!3m6!1s0x873ed87b70e6f473:0x38ee772171bae3e1!2sTelluride,+CO+81435,+USA!3b1!8m2!3d37.9374939!4d-107.8122852!3m4!1s0x873ed7fd24b94b9f:0x9d02e608ccfc306b!8m2!3d37.9129068!4d-107.8381813" target="_blank"> <div id="telluride" class="box"> Telluride 2670m <br/> <p> #luxury #quiet #usa </p> <div class="green"> 29 </div>  <div class="blue"> 46 </div> <div class="black"> 52 </div> </div> </a> 

<a class="hidden" href="https://www.google.com/maps/place/Tignes+Val+d'Is%C3%A8re/@45.4689497,4.665585,7z/data=!4m5!3m4!1s0x478974b6e64a1b11:0x9b3c65ed86a37ce1!8m2!3d45.4689497!4d6.9067958" target="_blank"> <div id="tignes" class="box"> Tignes 1800m <br/> <p> #cheap #car-free #pool #france</p> <br/> <div class="green">20 </div> <div class="blue"> 68 </div> <div class="red"> 40 </div> <div class="black"> 26 </div> </div> </a>

<a class="hidden" href="https://www.google.com/maps/place/Vail+Ski+Resort/@39.6334399,-115.3251057,5z/data=!4m13!1m7!3m6!1s0x876a7005515dcf07:0xc9ccc01f7e9aa3c4!2sVail,+CO+81657,+USA!3b1!8m2!3d39.6402638!4d-106.3741955!3m4!1s0x876a7060c630dbdb:0xa7c2cf2d4b45ada2!8m2!3d39.6061511!4d-106.3549519" target="_blank"> <div id="vail" class="box"> Vail 2470m <br/> <p> #party #luxury #usa </p> <br/> <div class="green"> 35 </div> <div class="blue">  56 </div>  <div class="black"> 102 </div> </div> </a> 

	<a class="hidden" href="https://www.google.com/maps/place/Tourist+Office+Val+d'Isere/@45.4485984,4.7408155,7z/data=!4m13!1m7!3m6!1s0x47890909fd5ffb93:0x408ab2ae4baa830!2s73150+Val-d'Is%C3%A8re,+France!3b1!8m2!3d45.448034!4d6.980226!3m4!1s0x47890be8d2918a3f:0xdbf52a5cc1090823!8m2!3d45.449121!4d6.9800963" target="_blank"> <div id="valdisere" class="box"> Val D'Isere 1850m <br/> <p> #party #luxury #pool #france </p> <br/>  <div class="green"> 20 </div> <div class="blue">  68 </div> <div class="red"> 40 </div> <div class="black"> 26 </div> </div> </a>

	<a class="hidden" href="https://www.google.com/maps/place/Val+Thorens/@45.2979478,4.3408875,7z/data=!4m5!3m4!1s0x4789866002267071:0x8ec7bc6dc1eef333!8m2!3d45.2979478!4d6.5820983" target="_blank"> <div id="valthorens" class="box"> Val Thorens 2300m <br/> <p> #party #luxury #pool #france </p> <br/> <div class="green"> 53 </div> <div class="blue"> 140 </div> <div class="red"> 112 </div> <div class="black"> 34 </div> </div> </a> 

<a class="hidden" href="https://www.google.com/maps/place/Whistler+ski+resort+BC/@50.1130232,-127.4368298,6z/data=!4m5!3m4!1s0x5487232a9da252a7:0xf87ac63ef242f54!8m2!3d50.1130232!4d-122.9544082" target="_blank"> <div id="whistler" class="box"> Whistler 670m <br/> <p> #party #luxury #pool #canada </p> <br/> <div class="green"> 35 </div>  <div class="blue"> 110 </div> <div class="black"> 35 </div>  <div class="diamond"<div class="black"> 10 </div></div> </a>

	<a class="hidden" href="https://www.google.com/maps/place/Zermatt/@46.0225132,5.5052743,7z/data=!4m13!1m7!3m6!1s0x478f35a2292ee5cd:0x400ff8840196f70!2s3920+Zermatt,+Switzerland!3b1!8m2!3d46.0207133!4d7.749117!3m4!1s0x478f3675de88e779:0xcc169fa9e5323505!8m2!3d46.0244723!4d7.7482957" target="_blank">  <div id="zermatt" class="box"> Zermatt 1620m <br/> <p> #party #luxury #car-free #swiss </p> <br/>  <div class="blue"> 140 </div> <div class="red"> 112 </div> <div class="black"> 34 </div> </div> </a>

</div>

【问题讨论】：

你能添加包含网格的html吗？因为我们在这里看不到。此外，filter 用于过滤集合中的项目。如果您想对集合中的每个项目做某事，请使用each..

标签： jquery css css-grid

【解决方案1】：

您使用了错误的选择器。 box 的 hidden 父级具有 display:none 并且是您需要切换的对象

$(document).ready(function() {
  $("#myInput").on("keyup", function() {
    var value = $(this).val().toLowerCase();
    $(".hidden").each(function() {
      $(this).toggle($(this).text().toLowerCase().indexOf(value) > -1)
    });
  });
});

.wrapper {
  display: grid;
  grid-template-columns: 300px 300px 300px 300px;
  grid-template-rows: 300px 300px 300px 300px;
  grid-gap: 10px;
  background-color: white;
  color: #444;
  font-family: sans-serif;
}

.hidden {
  display: none;
}

a {
  text-decoration: none;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="search">

  <input id="myInput" type="text" width="100%" placeholder="Search by 
    resort/hashtag"> </div>

<a class="hidden" href="https://www.google.com/maps/place/Avoriaz" target="_blank">
  <div id="avoriaz" class="box"> Avoriaz 1800m
    <br/>
    <p> #quiet #car-free #cheap #pool #france </p> <br/>
    <div class="green">
      31 </div>
    <div class="blue"> 122 </div>
    <div class="red"> 100 </div>
    <div class="black"> 32 </div>
  </div>
</a>

【讨论】：

非常感谢！这就是它现在几乎可以工作了。（我赞成你的回答，但我是新手）。现在的问题是现在默认情况下所有图像都是隐藏的。所以在用户搜索之前页面是空白的。