我正在尝试创建一个实时过滤功能。但我无法让它发挥作用。我希望班级的家长淡出。但到目前为止，只有自我淡化的课程。我无法弄清楚我做错了什么。我试过.parent和.closest（'div'）。
我会帮助解决这个问题。
jsfiddle：http://jsfiddle.net/xcbx3at0/
HTML：
<form id="live-filter" action="" method="post">
<fieldset>
<input type="text" class="text-input" id="city-filter" value="" />
</fieldset>
</form>
<div class="post">
<div class="header">
<h2>Stockholm</h2>
</div>
<table>
<tr>
<td>living</td>
<td>123</td>
</tr>
<tr>
<td>bad</td>
<td>1</td>
</tr>
<tr>
<td>sov</td>
<td>1</td>
</tr>
</table>
</div>
<div class="post">
<div class="header">
<h2>London</h2>
</div>
<table>
<tr>
<td>living</td>
<td>123</td>
</tr>
<tr>
<td>bad</td>
<td>1</td>
</tr>
<tr>
<td>sov</td>
<td>1</td>
</tr>
</table>
</div>
<div class="post">
<div class="header">
<h2>New York</h2>
</div>
<table>
<tr>
<td>living</td>
<td>123</td>
</tr>
<tr>
<td>bad</td>
<td>1</td>
</tr>
<tr>
<td>sov</td>
<td>1</td>
</tr>
</table>
</div>
<div class="post">
<div class="header">
<h2>New york</h2>
</div>
<table>
<tr>
<td>living</td>
<td>123</td>
</tr>
<tr>
<td>bad</td>
<td>1</td>
</tr>
<tr>
<td>sov</td>
<td>1</td>
</tr>
</table>
</div>
CSS：
.post {
border: 1px solid;
width: 200px;
height: 200px;
margin-top: 20px;
margin: 0 auto;
padding: 20px;
margin-bottom: 20px;
}
.post table {
margin: 0 auto;
}
.header h2 {
text-align: center;
}
jQuery的：
$(document).ready(function(){
$("#city-filter").keyup(function(){
// Retrieve the input field text and reset the count to zero
var filter = $(this).val(), count = 0;
// Loop through the comment list
$(".header").each(function(){
// If the list item does not contain the text phrase fade it out
if ($(this).text().search(new RegExp(filter, "i")) < 0) {
$(this).closest('div').fadeOut();
// Show the list item if the phrase matches and increase the count by 1
} else {
$(this).show();
count++;
}
});
// Update the count
var numberItems = count;
$("#filter-count").text("Number of posts = "+count);
});
});
答案 0 :(得分：1)
你需要将post元素作为目标
$(this).closest('.post').fadeOut();
$(document).ready(function() {
$("#city-filter").keyup(function() {
// Retrieve the input field text and reset the count to zero
var filter = $(this).val(),
count = 0;
// Loop through the comment list
$(".header").each(function() {
// If the list item does not contain the text phrase fade it out
if ($(this).text().search(new RegExp(filter, "i")) < 0) {
$(this).parent().fadeOut();
// Show the list item if the phrase matches and increase the count by 1
} else {
$(this).show();
count++;
}
});
// Update the count
var numberItems = count;
$("#filter-count").text("Number of posts = " + count);
});
});.post {
border: 1px solid;
width: 200px;
height: 200px;
margin-top: 20px;
margin: 0 auto;
padding: 20px;
margin-bottom: 20px;
}
.post table {
margin: 0 auto;
}
.header h2 {
text-align: center;
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<form id="live-filter" action="" method="post">
<fieldset>
<input type="text" class="text-input" id="city-filter" value="" />
<span id="filter-count"></span>
</fieldset>
</form>
<div class="post">
<div class="header">
<h2>Stockholm</h2>
</div>
<table>
<tr>
<td>living</td>
<td>123</td>
</tr>
<tr>
<td>bad</td>
<td>1</td>
</tr>
<tr>
<td>sov</td>
<td>1</td>
</tr>
</table>
</div>
<div class="post">
<div class="header">
<h2>London</h2>
</div>
<table>
<tr>
<td>living</td>
<td>123</td>
</tr>
<tr>
<td>bad</td>
<td>1</td>
</tr>
<tr>
<td>sov</td>
<td>1</td>
</tr>
</table>
</div>
<div class="post">
<div class="header">
<h2>New York</h2>
</div>
<table>
<tr>
<td>living</td>
<td>123</td>
</tr>
<tr>
<td>bad</td>
<td>1</td>
</tr>
<tr>
<td>sov</td>
<td>1</td>
</tr>
</table>
</div>
<div class="post">
<div class="header">
<h2>New york</h2>
</div>
<table>
<tr>
<td>living</td>
<td>123</td>
</tr>
<tr>
<td>bad</td>
<td>1</td>
</tr>
<tr>
<td>sov</td>
<td>1</td>
</tr>
</table>
</div>
注意：$(this).parent().fadeOut();应该有效
答案 1 :(得分：0)
我已经改变了一点点代码，请小心翼翼地检查小提琴，希望它对你有所帮助
http://jsfiddle.net/xcbx3at0/1/
$(function() {
$("#city-filter").keyup(function() {
// Retrieve the input field text and reset the count to zero
var filter = $(this).val(),
count = 0;
// Loop through the comment list
$(".header").each(function() {
// If the list item does not contain the text phrase fade it out
if ($(this).text().search(new RegExp(filter, "i")) < 0) {
$(this).parent().fadeOut();
// Show the list item if the phrase matches and increase the count by 1
} else {
$(this).parent().show();
count++;
}
});
// Update the count
var numberItems = count;
$("#filter-count").text("Number of posts = " + count);
});
});.post {
border: 1px solid;
width: 200px;
height: 200px;
margin-top: 20px;
margin: 0 auto;
padding: 20px;
margin-bottom: 20px;
display:inline-block
}
.post table {
margin: 0 auto;
}
.header h2 {
text-align: center;
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<form id="live-filter" action="" method="post">
<fieldset>
<input type="text" class="text-input" id="city-filter" value="" />
<span id="filter-count"></span>
</fieldset>
</form>
<div class="post">
<div class="header">
<h2>Stockholm</h2>
</div>
<table>
<tr>
<td>living</td>
<td>123</td>
</tr>
<tr>
<td>bad</td>
<td>1</td>
</tr>
<tr>
<td>sov</td>
<td>1</td>
</tr>
</table>
</div>
<div class="post">
<div class="header">
<h2>London</h2>
</div>
<table>
<tr>
<td>living</td>
<td>123</td>
</tr>
<tr>
<td>bad</td>
<td>1</td>
</tr>
<tr>
<td>sov</td>
<td>1</td>
</tr>
</table>
</div>
<div class="post">
<div class="header">
<h2>New York</h2>
</div>
<table>
<tr>
<td>living</td>
<td>123</td>
</tr>
<tr>
<td>bad</td>
<td>1</td>
</tr>
<tr>
<td>sov</td>
<td>1</td>
</tr>
</table>
</div>
<div class="post">
<div class="header">
<h2>New york</h2>
</div>
<table>
<tr>
<td>living</td>
<td>123</td>
</tr>
<tr>
<td>bad</td>
<td>1</td>
</tr>
<tr>
<td>sov</td>
<td>1</td>
</tr>
</table>
</div>