jQuery- 키 업에서 div를 필터하려고합니다
문제
수정 된 코드
jQuery(function($) {
$("#filter").keyup(function () {
var filter = $(this).val(), count = 0;
$(".filtered h2").each(function () {
if ($(this).text().search(new RegExp(filter, "i")) != -1) {
$(this).parent().addClass("hidden");
} else {
$(this).parent().removeClass("hidden");
count++;
}
$("#filter-count").text(count);
});
});
});
나열된 여러 DIV가 있으며 사용자가 입력을 시작할 수있는 입력 필드를 추가하고 각 DIVS H2 태그에 따라 DIV를 필터링 할 수 있습니다. 아래 코드를 시도하지만 필터링은 아닙니다. 그것은 오류를 던지지 않으므로이 시점에서 무엇을 해야할지 잘 모르겠습니다 ...
HTML 마크 업은 다음과 같습니다.
<input id="filter" name="filter" size="40"/>
<div class="filtered">
<div class="archive-row clearfix">
<label>Creator: </label><h2 class="hidden">Alchemy</h2>
<label>Title: </label> <p>Cras velit eros, eleifend ut viverra </p>
<label>Summary: </label><p>Etiam lobortis, risus a dignissim tempor, neque sapien lobortis mi, quis semper sapien nisi dictum nisi. Integer neque neque</p>
</div>
<div class="archive-row clearfix">
<label>Creator: </label><h2 class="hidden">Mathematics</h2>
<label>Title: </label> <p>Cras velit eros, eleifend ut viverra </p>
<label>Summary: </label><p>Etiam lobortis, risus a dignissim tempor, neque sapien lobortis mi, quis semper sapien nisi dictum nisi. Integer neque neque</p>
</div>
<div class="archive-row clearfix">
<label>Creator: </label><h2 class="hidden">English</h2>
<label>Title: </label> <p>Cras velit eros, eleifend ut viverra </p>
<label>Summary: </label><p>Etiam lobortis, risus a dignissim tempor, neque sapien lobortis mi, quis semper sapien nisi dictum nisi. Integer neque neque</p>
</div>
</div>
여기 jQuery가 있습니다 ...
$(document).ready(function() {
$("#filter").keyup(function () {
var filter = $(this).val(), count = 0;
$(".filtered h2").each(function () {
if ($(this).text().search(new RegExp(filter, "i")) < 0) {
$(this).addClass("hidden");
} else {
$(this).removeClass("hidden");
count++;
}
});
$("#filter-count").text(count);
});
});
해결책
<input id="filter" name="filter" size="40"/>
<div class="filtered">
<div class="archive-row clearfix">
<label>Creator: </label><h2 >Alchemy</h2>
<label>Title: </label> <p>Cras velit eros, eleifend ut viverra </p>
<label>Summary: </label><p>Etiam lobortis, risus a dignissim tempor, neque sapien lobortis mi, quis semper sapien nisi dictum nisi. Integer neque neque</p>
</div>
<div class="archive-row clearfix">
<label>Creator: </label><h2 >Mathematics</h2>
<label>Title: </label> <p>Cras velit eros, eleifend ut viverra </p>
<label>Summary: </label><p>Etiam lobortis, risus a dignissim tempor, neque sapien lobortis mi, quis semper sapien nisi dictum nisi. Integer neque neque</p>
</div>
<div class="archive-row clearfix">
<label>Creator: </label><h2>English</h2>
<label>Title: </label> <p>Cras velit eros, eleifend ut viverra </p>
<label>Summary: </label><p>Etiam lobortis, risus a dignissim tempor, neque sapien lobortis mi, quis semper sapien nisi dictum nisi. Integer neque neque</p>
</div>
</div>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3/jquery.min.js"></script>
<script>
$(document).ready(function() {
$("#filter").keyup(function () {
var filter = $(this).val(),
count = 0;
$(".filtered h2").each(function () {
var parent = $(this).parent(), length = $(this).text().length>0;
if ( length && $(this).text().search(new RegExp(filter, "i")) < 0) {
parent.hide();
} else {
parent.show();
count++;
}
});
$("#filter-count").text(count);
});
});
</script>
<div id="filter-count"></div>
다른 팁
실제 H2 태그에서 .Each () 함수를 사용하고 있으며 그로부터 숨겨진 클래스를 추가/제거하는 것 같습니다. 내 생각에, 당신은 H2가 아닌 div 자체에서 숨겨진 클래스를 추가/제거하고 싶습니까?
$(document).ready(function() {
$("#filter").keyup(function () {
var filter = $(this).val(), count = 0;
$(".filtered h2").each(function () {
if ($(this).text().search(new RegExp(filter, "i")) < 0) {
$(this).parent().addClass("hidden");
} else {
$(this).parent().removeClass("hidden");
count++;
}
});
$("#filter-count").text(count);
});
});
나는 틀렸을 지 모르지만 부모에게 전화 가이 문제를 해결해야한다고 생각합니다.
$(document).ready(function() {
$("#filter").keyup(function () {
var filter = $(this).val(),
count = 0;
$(".filtered h2").each(function () {
if ($(this).text().search(new RegExp(filter, "i")) < 0) {
$(this).parent().addClass("hidden");
} else {
$(this).parent().removeClass("hidden");
count++;
}
});
$("#filter-count").text(count);
});
});
이 jQuery 플러그인은 귀하에게 적합합니다. 제목 별 일부 DIV 또는 클래스 이름 별 다른 요소
http://labs.easyblog.it/jquery-filterbox/
$('#findbox1').filterbox({
container: '.boxlist',
child: '.box',
childKey: '.title'
});
제휴하지 않습니다 StackOverflow