用jQuery过滤div [英] Filter div with jQuery
本文介绍了用jQuery过滤div的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
我正在寻找使用输入字段过滤一些div：
我想在开头显示所有div，并且当用户键入输入字段时，按< p class =name>< / p>
<！ - 最新编译和缩小的CSS - >< link rel =stylesheethref =https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min .cssintegrity =sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va + PmSTsz / K68vbdEjh4ucrossorigin =anonymous>< input type =textclass =filterid =myInputplaceholder =Recherche rapide ...> < div class =col-lg-6 col-md-6 col-sm-12id =style =visibility：visible; display：block;> < div class =card all-patientsid => < div class =body> < div class =rowid => < div class =col-md-4 col-sm-4 text-center m-b-0> < / DIV> < div class =col-md-8 col-sm-8 m-b-0> < p class =name> John Doe< / p> < p为H. 12 ans< / p> < p为H. 04 94 94 94 94< / p> < button type =buttonclass =btn waves-effect wave-cyan> Fiche du patient< / button> < / DIV> < / DIV> < / DIV> < / div>< / div>< div class =col-lg-6 col-md-6 col-sm-12id =style =visibility：visible; display：block;> < div class =card all-patientsid => < div class =body> < div class =rowid => < div class =col-md-4 col-sm-4 text-center m-b-0> < / DIV> < div class =col-md-8 col-sm-8 m-b-0> < p class =name> Samuel pelo< / p> < p为H. 12 ans< / p> < p为H. 04 94 94 94 94< / p> < button type =buttonclass =btn waves-effect wave-cyan> Fiche du patient< / button> < / DIV> < / DIV> < / DIV> < / div>< / div>
解决方案
此解决方案过滤器使用包含输入值的名称进行分隔。过滤不区分大小写。此外，没有设置任何类，但如果你需要，你可以添加这个。只需将 $ card.show（）更改为 $ card.addClass（'visible'）并更改 $ card.hide（）至 $ card.removeClass（'visible'）。
（'input'，function） （）{var $ this = $（this）; var $ cards = $（'。card'）; $ filteredCards = $ cards.each（function（i，card）{var $ card = $（card）; var name = $ card.find（'。name'）。first（）; name = name.text（）。toLowerCase（）; if（name.indexOf（$ this.val（）。toLowerCase（））！== -1 ）{$ card.show（）;} else {$ card.hide（）;}}）;}）;}）;
< script src =https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js> ;< / script><输入t ype =textclass =filterid =myInputplaceholder =Recherche rapide ...>< div class =col-lg-6 col-md-6 col-sm-12id = style =visibility：visible; display：block;>< div class =card all-patientsid =>< div class =body>< div class =rowid =>< div class =col-md-4 col-sm-4 text-center mb-0>< / div>< div class =col-md-8 col-sm-8 mb-0> < p class =name> John Doe< / p>< p> 12 ans< / p>< p> 04 94 94 94 94< / p>< button type =buttonclass = < / div>< / div>< / div>< div class =col- lg-6 col-md-6 col-sm-12id =style =visibility：visible; display：block;>< div class =card all-patientsid =>< div class =body>< div class =rowid =>< div class =col-md-4 col-sm-4 text-center mb-0>< / div>< div class =col-md-8 col-sm-8 mb-0> < p class =name> Samuel pelo< / p>< p> 12 ans< / p>< p> 04 94 94 94 94< / p>< button type =buttonclass = < / div>< / div>< / div>> Fiche du patient< / button>< / div>< / pre>
I'm looking to filter some div with an input field :
I want to show all divs at the beginning and when user types into the input field, filter by the <p class="name"></p>
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<input type="text" class="filter" id="myInput" placeholder="Recherche rapide...">
<div class="col-lg-6 col-md-6 col-sm-12" id="" style="visibility: visible; display: block;">
<div class="card all-patients" id="">
<div class="body">
<div class="row" id="">
<div class="col-md-4 col-sm-4 text-center m-b-0">
</div>
<div class="col-md-8 col-sm-8 m-b-0">
<p class="name">John Doe</p>
<p> 12 ans</p>
<p> 04 94 94 94 94</p>
<button type="button" class="btn waves-effect waves-cyan">Fiche du patient</button>
</div>
</div>
</div>
</div>
</div>
<div class="col-lg-6 col-md-6 col-sm-12" id="" style="visibility: visible; display: block;">
<div class="card all-patients" id="">
<div class="body">
<div class="row" id="">
<div class="col-md-4 col-sm-4 text-center m-b-0">
</div>
<div class="col-md-8 col-sm-8 m-b-0">
<p class="name">Samuel pelo</p>
<p> 12 ans</p>
<p> 04 94 94 94 94</p>
<button type="button" class="btn waves-effect waves-cyan">Fiche du patient</button>
</div>
</div>
</div>
</div>
</div>
解决方案
This solution filter divs with names that contains value from input. Filtering is case-insensitive. Also, there is no setting any class, but if you need you can add this. Just change $card.show() to $card.addClass('visible') and change $card.hide() to $card.removeClass('visible').
$(document).ready(function() {
$('.filter').on('input', function() {
var $this = $(this);
var $cards = $('.card');
$filteredCards = $cards.each(function(i, card) {
var $card = $(card);
var name = $card.find('.name').first();
name = name.text().toLowerCase();
if(name.indexOf($this.val().toLowerCase()) !== -1) {
$card.show();
} else {
$card.hide();
}
});
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="text" class="filter" id="myInput" placeholder="Recherche rapide...">
<div class="col-lg-6 col-md-6 col-sm-12" id="" style="visibility: visible; display: block;">
<div class="card all-patients" id="">
<div class="body">
<div class="row" id="">
<div class="col-md-4 col-sm-4 text-center m-b-0">
</div>
<div class="col-md-8 col-sm-8 m-b-0">
<p class="name">John Doe</p>
<p> 12 ans</p>
<p> 04 94 94 94 94</p>
<button type="button" class="btn waves-effect waves-cyan">Fiche du patient</button>
</div>
</div>
</div>
</div>
</div>
<div class="col-lg-6 col-md-6 col-sm-12" id="" style="visibility: visible; display: block;">
<div class="card all-patients" id="">
<div class="body">
<div class="row" id="">
<div class="col-md-4 col-sm-4 text-center m-b-0">
</div>
<div class="col-md-8 col-sm-8 m-b-0">
<p class="name">Samuel pelo</p>
<p> 12 ans</p>
<p> 04 94 94 94 94</p>
<button type="button" class="btn waves-effect waves-cyan">Fiche du patient</button>
</div>
</div>
</div>
</div>
</div>
这篇关于用jQuery过滤div的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
