这有点难以解释，但基本上我有一个on change事件，它将根据图像的alt值过滤列表中的项目。它工作正常，但我想在每次发生更改事件时（或具有活动类的项目）从dom中完全删除非活动项。谁能解释一下我在哪里可能会出错？
注意：我已注释掉该功能无法正常工作所需的代码。
请忽略HTML中的活动类。我在页面加载时就已经有了它。
function projectFilter(){
$('#filter').on('change', function(){
var value = $(this).val();
$('.projects li').each(function(){
//**This section I am unsure about**.
/*if($(this).hasClass('active')){
var store = $(this);
store.appendTo();
} else{
$(this).remove();
}*/
console.log($(this));
var alt = $(this).find('img').attr('alt');
var split = alt.split(' ');
var lower = split[0].toLowerCase();
if(lower == value){
$(this).addClass('active');
} else{
$(this).removeClass('active');
}
});
//**This part just displays a message if no results are found.**
/*
var active = $('.projects .active').length;
if(active > 0){
$('p.no-results').removeClass('active');
} else{
$('p.no-results').addClass('active');
}
*/
});
}
<div class="content projects">
<div class="row long">
<h1>Projects</h1>
<div class="p-filter">
<form class="cf">
<select name="filter" id="filter" class="filter right">
<option>---</option>
<option value="corporate">Corporate</option>
<option value="education">Education</option>
<option value="healthcare">Healthcare</option>
<option value="residential">Residential</option>
<option value="religious">Religious</option>
</select>
<!-- <input type="text" name="search" id="search" class="search">
<input type="submit" value="Search"> -->
</form>
</div>
<div class="col_08">
<p class="no-results">No results exist. Please choose another selection.</p>
<ul class="cf">
<li class="active odd"><a href="/assets/img/misc/carpentry/saks_2.jpg" class="fancybox" rel="gallery"><img alt="Corporate - Saks Fifth Avenue 2" src="/assets/img/misc/carpentry/saks_2.jpg"></a></li>
<li class="active even"><a href="/assets/img/misc/carpentry/saks_3.jpg" class="fancybox" rel="gallery"><img alt="Corporate - Saks Fifth Avenue 3" src="/assets/img/misc/carpentry/saks_3.jpg"></a></li>
<li class="active odd"><a href="/assets/img/misc/carpentry/saks_4.jpg" class="fancybox" rel="gallery"><img alt="Corporate - Saks Fifth Avenue 4" src="/assets/img/misc/carpentry/saks_4.jpg"></a></li>
<li class="active even"><a href="/assets/img/misc/carpentry/st_teresa_of_avilia_1.jpg" class="fancybox" rel="gallery"><img alt="Religious - St. Teresa of Avilia" src="/assets/img/misc/carpentry/st_teresa_of_avilia_1.jpg"></a></li>
<li class="active odd"><a href="/assets/img/misc/masonry/university_saint_mary_boathouse_1.jpg" class="fancybox" rel="gallery"><img alt="Education - University of Saint Mary on the Lake Boathouse 1" src="/assets/img/misc/masonry/university_saint_mary_boathouse_1.jpg"></a></li>
<li class="active even"><a href="/assets/img/misc/masonry/university_saint_mary_boathouse_2.jpg" class="fancybox" rel="gallery"><img alt="Education - University of Saint Mary on the Lake Boathouse 2" src="/assets/img/misc/masonry/university_saint_mary_boathouse_2.jpg"></a></li>
<li class="active odd"><a href="/assets/img/misc/masonry/century_tower_1.jpg" class="fancybox" rel="gallery"><img alt="Residential - Century Tower" src="/assets/img/misc/masonry/century_tower_1.jpg"></a></li>
<li class="active even"><a href="/assets/img/misc/masonry/catholic_charities_1.jpg" class="fancybox" rel="gallery"><img alt="Religious - Catholic Charities" src="/assets/img/misc/masonry/catholic_charities_1.jpg"></a></li>
<li class="active odd"><a href="/assets/img/misc/masonry/newark_electronics_1.jpg" class="fancybox" rel="gallery"><img alt="Residential - Century Tower" src="/assets/img/misc/masonry/newark_electronics_1.jpg"></a></li>
<li class="active even"><a href="/assets/img/misc/masonry/holy_family_1.jpg" class="fancybox" rel="gallery"><img alt="Religious - Holy Family" src="/assets/img/misc/masonry/holy_family_1.jpg"></a></li>
<li class="active odd"><a href="/assets/img/misc/masonry/saint_mary_lake_1.jpg" class="fancybox" rel="gallery"><img alt="Religious - Saint Mary of the Lake 1" src="/assets/img/misc/masonry/saint_mary_lake_1.jpg"></a></li>
<li class="active even"><a href="/assets/img/misc/masonry/saint_mary_lake_2.jpg" class="fancybox" rel="gallery"><img alt="Religious - Saint Mary of the Lake 2" src="/assets/img/misc/masonry/saint_mary_lake_2.jpg"></a></li>
<li class="active odd"><a href="/assets/img/misc/masonry/ss_cyril_methodist_1.jpg" class="fancybox" rel="gallery"><img alt="Religious - SS Cyril Methodist" src="/assets/img/misc/masonry/ss_cyril_methodist_1.jpg"></a></li>
<li class="active even"><a href="/assets/img/misc/masonry/st_benedict_bell_tower_1.jpg" class="fancybox" rel="gallery"><img alt="Religious - St Benedict Bell Tower" src="/assets/img/misc/masonry/st_benedict_bell_tower_1.jpg"></a></li>
<li class="active odd"><a href="/assets/img/misc/masonry/st_james_chapel_1.jpg" class="fancybox" rel="gallery"><img alt="Religious - St. James Chapel 1" src="/assets/img/misc/masonry/st_james_chapel_1.jpg"></a></li>
<li class="active even"><a href="/assets/img/misc/masonry/st_james_chapel_2.jpg" class="fancybox" rel="gallery"><img alt="Religious - St. James Chapel 2" src="/assets/img/misc/masonry/st_james_chapel_2.jpg"></a></li>
<li class="active odd"><a href="/assets/img/misc/masonry/st_joesph_1.jpg" class="fancybox" rel="gallery"><img alt="Religious - St. Joesph" src="/assets/img/misc/masonry/st_joesph_1.jpg"></a></li>
<li class="active even"><a href="/assets/img/misc/masonry/st_teresa_of_avilia_1.jpg" class="fancybox" rel="gallery"><img alt="Religious - St. Teresa of Avilia 1" src="/assets/img/misc/masonry/st_teresa_of_avilia_1.jpg"></a></li>
<li class="active odd"><a href="/assets/img/misc/masonry/st_teresa_of_avilia_2.jpg" class="fancybox" rel="gallery"><img alt="Religious - St. Teresa of Avilia 2" src="/assets/img/misc/masonry/st_teresa_of_avilia_2.jpg"></a></li>
<li class="active even"><a href="/assets/img/misc/masonry/st_teresa_of_avilia_3.jpg" class="fancybox" rel="gallery"><img alt="Religious - St. Teresa of Avilia 3" src="/assets/img/misc/masonry/st_teresa_of_avilia_3.jpg"></a></li>
<li class="active odd"><a href="/assets/img/misc/masonry/st_alphonsus_1.jpg" class="fancybox" rel="gallery"><img alt="Religious - St. Alphonsus" src="/assets/img/misc/masonry/st_alphonsus_1.jpg"></a></li>
<li class="active even"><a href="/assets/img/misc/masonry/st_linus_1.jpg" class="fancybox" rel="gallery"><img alt="Religious - St. Linus" src="/assets/img/misc/masonry/st_linus_1.jpg"></a></li>
<li class="active odd"><a href="/assets/img/misc/masonry/st_roman_1.jpg" class="fancybox" rel="gallery"><img alt="Religious - St. Roman" src="/assets/img/misc/masonry/st_roman_1.jpg"></a></li>
<li class="active even"><a href="/assets/img/misc/contracting/ltp_1.jpg" class="fancybox" rel="gallery"><img alt="Corporate - LTP 1" src="/assets/img/misc/contracting/ltp_1.jpg"></a></li>
<li class="active odd"><a href="/assets/img/misc/contracting/ltp_2.jpg" class="fancybox" rel="gallery"><img alt="Corporate - LTP 2" src="/assets/img/misc/contracting/ltp_2.jpg"></a></li>
<li class="active even"><a href="/assets/img/misc/contracting/holy_name_rectory_1.jpg" class="fancybox" rel="gallery"><img alt="Religious - Holy Name Rectory 1" src="/assets/img/misc/contracting/holy_name_rectory_1.jpg"></a></li>
<li class="active odd"><a href="/assets/img/misc/contracting/holy_name_rectory_2.jpg" class="fancybox" rel="gallery"><img alt="Religious - Holy Name Rectory 2" src="/assets/img/misc/contracting/holy_name_rectory_2.jpg"></a></li>
<li class="active even"><a href="/assets/img/misc/contracting/holy_name_rectory_3.jpg" class="fancybox" rel="gallery"><img alt="Religious - Holy Name Rectory 3" src="/assets/img/misc/contracting/holy_name_rectory_3.jpg"></a></li>
<li class="active odd"><a href="/assets/img/misc/contracting/ic_st_joe_school_2.jpg" class="fancybox" rel="gallery"><img alt="Education - IC St. Joe School 2" src="/assets/img/misc/contracting/ic_st_joe_school_2.jpg"></a></li>
<li class="active even"><a href="/assets/img/misc/contracting/ic_st_joe_school_3.jpg" class="fancybox" rel="gallery"><img alt="Education - IC St. Joe School 3" src="/assets/img/misc/contracting/ic_st_joe_school_3.jpg"></a></li>
<li class="active odd"><a href="/assets/img/misc/contracting/st_giles_1.jpg" class="fancybox" rel="gallery"><img alt="Education - St.Giles 1" src="/assets/img/misc/contracting/st_giles_1.jpg"></a></li>
<li class="active even"><a href="/assets/img/misc/contracting/st_giles_2.jpg" class="fancybox" rel="gallery"><img alt="Education - St.Giles 2" src="/assets/img/misc/contracting/st_giles_2.jpg"></a></li>
<li class="active odd"><a href="/assets/img/misc/contracting/st_giles_3.jpg" class="fancybox" rel="gallery"><img alt="Education - St.Giles 3" src="/assets/img/misc/contracting/st_giles_3.jpg"></a></li>
<li class="active even"><a href="/assets/img/misc/contracting/st_giles_4.jpg" class="fancybox" rel="gallery"><img alt="Religious - St.Giles 4" src="/assets/img/misc/contracting/st_giles_4.jpg"></a></li>
<li class="active odd"><a href="/assets/img/misc/contracting/st_giles_5.jpg" class="fancybox" rel="gallery"><img alt="Religious - St.Giles 5" src="/assets/img/misc/contracting/st_giles_5.jpg"></a></li>
<li class="active even"><a href="/assets/img/misc/contracting/education_1.jpg" class="fancybox" rel="gallery"><img alt="Education - Education 1" src="/assets/img/misc/contracting/education_1.jpg"></a></li>
<li class="active odd"><a href="/assets/img/misc/contracting/education_2.jpg" class="fancybox" rel="gallery"><img alt="Education - Education 2" src="/assets/img/misc/contracting/education_2.jpg"></a></li>
<li class="active even"><a href="/assets/img/misc/contracting/holy_name_cathedral_1.jpg" class="fancybox" rel="gallery"><img alt="Religious - Holy Name Cathedral 1" src="/assets/img/misc/contracting/holy_name_cathedral_1.jpg"></a></li>
<li class="active odd"><a href="/assets/img/misc/contracting/holy_name_cathedral_2.jpg" class="fancybox" rel="gallery"><img alt="Religious - Holy Name Cathedral 2" src="/assets/img/misc/contracting/holy_name_cathedral_2.jpg"></a></li>
<li class="active even"><a href="/assets/img/misc/contracting/holy_name_cathedral_3.jpg" class="fancybox" rel="gallery"><img alt="Religious - Holy Name Cathedral 3" src="/assets/img/misc/contracting/holy_name_cathedral_3.jpg"></a></li>
<li class="active odd"><a href="/assets/img/misc/contracting/holy_name_cathedral_4.jpg" class="fancybox" rel="gallery"><img alt="Religious - Holy Name Cathedral 4" src="/assets/img/misc/contracting/holy_name_cathedral_4.jpg"></a></li>
<li class="active even"><a href="/assets/img/misc/contracting/holy_name_courtyard_1.jpg" class="fancybox" rel="gallery"><img alt="Religious - Holy Name Courtyard 1" src="/assets/img/misc/contracting/holy_name_courtyard_1.jpg"></a></li>
<li class="active odd"><a href="/assets/img/misc/contracting/holy_name_courtyard_2.jpg" class="fancybox" rel="gallery"><img alt="Religious - Holy Name Courtyard 2" src="/assets/img/misc/contracting/holy_name_courtyard_2.jpg"></a></li>
<li class="active even"><a href="/assets/img/misc/contracting/holy_name_courtyard_3.jpg" class="fancybox" rel="gallery"><img alt="Religious - Holy Name Courtyard 3" src="/assets/img/misc/contracting/holy_name_courtyard_3.jpg"></a></li>
<li class="active odd"><a href="/assets/img/misc/contracting/holy_name_courtyard_4.jpg" class="fancybox" rel="gallery"><img alt="Religious - Holy Name Courtyard 4" src="/assets/img/misc/contracting/holy_name_courtyard_4.jpg"></a></li>
<li class="active even"><a href="/assets/img/misc/contracting/holy_name_courtyard_5.jpg" class="fancybox" rel="gallery"><img alt="Religious - Holy Name Courtyard 5" src="/assets/img/misc/contracting/holy_name_courtyard_5.jpg"></a></li>
<li class="active odd"><a href="/assets/img/misc/contracting/holy_name_courtyard_6.jpg" class="fancybox" rel="gallery"><img alt="Religious - Holy Name Courtyard 6" src="/assets/img/misc/contracting/holy_name_courtyard_6.jpg"></a></li>
<li class="active even"><a href="/assets/img/misc/contracting/holy_name_courtyard_7.jpg" class="fancybox" rel="gallery"><img alt="Religious - Holy Name Courtyard 7" src="/assets/img/misc/contracting/holy_name_courtyard_7.jpg"></a></li>
<li class="active odd"><a href="/assets/img/misc/contracting/holy_name_courtyard_8.jpg" class="fancybox" rel="gallery"><img alt="Religious - Holy Name Courtyard 8" src="/assets/img/misc/contracting/holy_name_courtyard_8.jpg"></a></li>
<li class="active even"><a href="/assets/img/misc/contracting/holy_name_courtyard_9.jpg" class="fancybox" rel="gallery"><img alt="Religious - Holy Name Courtyard 9" src="/assets/img/misc/contracting/holy_name_courtyard_9.jpg"></a></li>
<li class="active odd"><a href="/assets/img/misc/contracting/st_julie_billart_1.jpg" class="fancybox" rel="gallery"><img alt="Religious - St. Julie Billart 1" src="/assets/img/misc/contracting/st_julie_billart_1.jpg"></a></li>
<li class="active even"><a href="/assets/img/misc/contracting/st_julie_billart_2.jpg" class="fancybox" rel="gallery"><img alt="Religious - St. Julie Billart 2" src="/assets/img/misc/contracting/st_julie_billart_2.jpg"></a></li>
<li class="active odd"><a href="/assets/img/misc/contracting/st_teresa_of_avilia_1.jpg" class="fancybox" rel="gallery"><img alt="Religious - St. Teresa of Avilia 1" src="/assets/img/misc/contracting/st_teresa_of_avilia_1.jpg"></a></li>
<li class="active even"><a href="/assets/img/misc/contracting/st_teresa_of_avilia_2.jpg" class="fancybox" rel="gallery"><img alt="Religious - St. Teresa of Avilia 2" src="/assets/img/misc/contracting/st_teresa_of_avilia_2.jpg"></a></li>
<li class="active odd"><a href="/assets/img/misc/contracting/st_teresa_of_avilia_3.jpg" class="fancybox" rel="gallery"><img alt="Religious - St. Teresa of Avilia 3" src="/assets/img/misc/contracting/st_teresa_of_avilia_3.jpg"></a></li>
<li class="active even"><a href="/assets/img/misc/contracting/st_teresa_of_avilia_4.jpg" class="fancybox" rel="gallery"><img alt="Religious - St. Teresa of Avilia 4" src="/assets/img/misc/contracting/st_teresa_of_avilia_4.jpg"></a></li>
<li class="active odd"><a href="/assets/img/misc/contracting/st_teresa_of_avilia_5.jpg" class="fancybox" rel="gallery"><img alt="Religious - St. Teresa of Avilia 5" src="/assets/img/misc/contracting/st_teresa_of_avilia_5.jpg"></a></li>
<li class="active even"><a href="/assets/img/misc/contracting/st_alphonsus_1.jpg" class="fancybox" rel="gallery"><img alt="Religious - St. Alphonsus 1" src="/assets/img/misc/contracting/st_alphonsus_1.jpg"></a></li>
<li class="active odd"><a href="/assets/img/misc/contracting/st_alphonsus_2.jpg" class="fancybox" rel="gallery"><img alt="Religious - St. Alphonsus 2" src="/assets/img/misc/contracting/st_alphonsus_2.jpg"></a></li>
<li class="active even"><a href="/assets/img/misc/contracting/st_alphonsus_3.jpg" class="fancybox" rel="gallery"><img alt="Religious - St. Alphonsus 3" src="/assets/img/misc/contracting/st_alphonsus_3.jpg"></a></li>
<li class="active odd"><a href="/assets/img/misc/contracting/st_linus_parish_center_2.jpg" class="fancybox" rel="gallery"><img alt="Religious - St. Linus Parish Center 2" src="/assets/img/misc/contracting/st_linus_parish_center_2.jpg"></a></li>
</ul>
</div>
</div>
</div>
答案 0 :(得分：1)
您需要将li元素缓存到变量中，并根据它进行过滤。见下面的例子：
// cache the whole list item into variable
var $li = $('.listItem li');
// register change event
$('#filter').on('change', function() {
// store search value
var
value = $(this).val(),
filteredElem;
// at first, we remove all the list items
// completely from page
$('.listItem').empty();
// filter out chached element
filteredElem = $li.filter(function() {
var
alt = $(this).find('img').attr('alt'),
split = alt.split(' '),
lower = split[0].toLowerCase();
if (lower == value) {
$(this).addClass('active');
// take only matched element
return $(this);
}
});
// append back filtered element into UL
$('.listItem').append(filteredElem);
});
注意我在演示页面的.listItem行<ul class="cf listItem">上添加了20类，以便更轻松地选择输出元素。
答案 1 :(得分：0)
如果是select下拉列表，并且您想要从下拉菜单中删除该项目，则可以在removeClass代码下方添加该项目以完全删除该选项：
$(this).remove();