如何根据card-title过滤结果？
快速查看：https://codepen.io/anon/pen/zyqemK
JQUERY：
$(document).ready(function(){
$("#myInput").on("keyup", function() {
<NEED HELP HERE>
});
});
HTML：
<body>
<div class="col-sm-10 col-sm-offset-1 col-md-11 col-md-offset-1 main">
<input type="text" id="myInput" value="" class="form-control form-control-lg form-control-borderles" placeholder="Filtering | Search Bar">
</input>
</div>
<br>
<div class="py-5">
<div class="container" id="MyCards">
<div class="row hidden-md-up">
<div class="col-md-4">
<div class="card">
<div class="card-block">
<h4 class="card-title">Card title</h4>
<h6 class="card-subtitle text-muted">Support card subtitle</h6>
<p class="card-text p-y-1">Some quick example text to build on the card title .</p>
<a href="#" class="card-link">link</a>
<a href="#" class="card-link">Second link</a>
</div>
</div>
</div>
<div class="col-md-4">
<div class="card">
<div class="card-block">
<h4 class="card-title">Card title</h4>
<h6 class="card-subtitle text-muted">Support card subtitle</h6>
<p class="card-text p-y-1">Some quick example text to build on the card title .</p>
<a href="#" class="card-link">link</a>
<a href="#" class="card-link">Second link</a>
</div>
</div>
</div>
<div class="col-md-4">
<div class="card">
<div class="card-block">
<h4 class="card-title">Card title</h4>
<h6 class="card-subtitle text-muted">Support card subtitle</h6>
<p class="card-text p-y-1">Some quick example text to build on the card title .</p>
<a href="#" class="card-link">link</a>
<a href="#" class="card-link">Second link</a>
</div>
</div>
</div>
</div><br>
<div class="row hidden-md-up">
<div class="col-md-4">
<div class="card">
<div class="card-block">
<h4 class="card-title">Card title</h4>
<h6 class="card-subtitle text-muted">Support card subtitle</h6>
<p class="card-text p-y-1">Some quick example text to build on the card title .</p>
<a href="#" class="card-link">link</a>
<a href="#" class="card-link">Second link</a>
</div>
</div>
</div>
<div class="col-md-4">
<div class="card">
<div class="card-block">
<h4 class="card-title">Card title</h4>
<h6 class="card-subtitle text-muted">Support card subtitle</h6>
<p class="card-text p-y-1">Some quick example text to build on the card title .</p>
<a href="#" class="card-link">link</a>
<a href="#" class="card-link">Second link</a>
</div>
</div>
</div>
<div class="col-md-4">
<div class="card">
<div class="card-block">
<h4 class="card-title">Card title</h4>
<h6 class="card-subtitle text-muted">Support card subtitle</h6>
<p class="card-text p-y-1">Some quick example text to build on the card title .</p>
<a href="#" class="card-link">link</a>
<a href="#" class="card-link">Second link</a>
</div>
</div>
</div>
</div><br>
<body>
<div class="py-5">
<div class="container">
<div class="row hidden-md-up">
<div class="col-md-4">
<div class="card">
<div class="card-block">
<h4 class="card-title">Card title</h4>
<h6 class="card-subtitle text-muted">Support card subtitle</h6>
<p class="card-text p-y-1">Some quick example text to build on the card title .</p>
<a href="#" class="card-link">link</a>
<a href="#" class="card-link">Second link</a>
</div>
</div>
</div>
<div class="col-md-4">
<div class="card">
<div class="card-block">
<h4 class="card-title">Card title</h4>
<h6 class="card-subtitle text-muted">Support card subtitle</h6>
<p class="card-text p-y-1">Some quick example text to build on the card title .</p>
<a href="#" class="card-link">link</a>
<a href="#" class="card-link">Second link</a>
</div>
</div>
</div>
<div class="col-md-4">
<div class="card">
<div class="card-block">
<h4 class="card-title">Card title</h4>
<h6 class="card-subtitle text-muted">Support card subtitle</h6>
<p class="card-text p-y-1">Some quick example text to build on the card title .</p>
<a href="#" class="card-link">link</a>
<a href="#" class="card-link">Second link</a>
</div>
</div>
</div>
</div><br>
<div class="row hidden-md-up">
<div class="col-md-4">
<div class="card">
<div class="card-block">
<h4 class="card-title">Card title</h4>
<h6 class="card-subtitle text-muted">Support card subtitle</h6>
<p class="card-text p-y-1">Some quick example text to build on the card title .</p>
<a href="#" class="card-link">link</a>
<a href="#" class="card-link">Second link</a>
</div>
</div>
</div>
<div class="col-md-4">
<div class="card">
<div class="card-block">
<h4 class="card-title">Card title</h4>
<h6 class="card-subtitle text-muted">Support card subtitle</h6>
<p class="card-text p-y-1">Some quick example text to build on the card title .</p>
<a href="#" class="card-link">link</a>
<a href="#" class="card-link">Second link</a>
</div>
</div>
</div>
<div class="col-md-4">
<div class="card">
<div class="card-block">
<h4 class="card-title">DIFF title</h4>
<h6 class="card-subtitle text-muted">Support card subtitle</h6>
<p class="card-text p-y-1">Some quick example text to build on the card title .</p>
<a href="#" class="card-link">link</a>
<a href="#" class="card-link">Second link</a>
</div>
</div>
</div>
</div><br>
</div>
</div>
</div>
<script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/tether/1.4.0/js/tether.min.js"></script>
<script src="https://pingendo.com/assets/bootstrap/bootstrap-4.0.0-alpha.6.min.js"></script>
</body>
</div>
</div>
</div>
<script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/tether/1.4.0/js/tether.min.js"></script>
<script src="https://pingendo.com/assets/bootstrap/bootstrap-4.0.0-alpha.6.min.js"></script>
</body>
答案 0 :(得分：2)
我从您的代码笔中调整了js，以便它根据所包含的h4文本来过滤卡片div，这就是您要执行的操作吗？
$(document).ready(function() {
$("#myInput").on("keyup", function() {
var value = $(this).val().toLowerCase();
$("#MyCards .card").filter(function() {
$(this).toggle($(this).find('h4').text().toLowerCase().indexOf(value) > -1)
});
});
});