#jquery #filter #anonymous-function
#jquery #Фильтр #анонимная функция
Вопрос:
<div class='volledige-breedte floatleft' style='border:1px solid #ff0080' >
<div class='filterDiv linken2x2links'><a href='http://www.staplijst.com/wsv-wetteren.asp' target='staplijst_link'><img src='{#ImageRoot}/groot/010.jpg' class='logo100' alt='WSV Wetteren AKTIVIA 010' align='left'></a><a href='http://www.staplijst.com/wsv-wetteren.asp' target='staplijst_link'><b>WSV Wetteren</b></a>amp;nbsp;<img src='{#ImageRoot}/staplijst-zonnetje.gif' class='inline-icon16' alt='licentiehouder van Staplijst'><br><br>AKTIVIA 010<br> <div style='text-align:center;'><a href='{#WebRoot}/wandelclub-wsv-wetteren-aktivia-010.asp'>alle statistieken en grafiekenamp;nbsp;<img src='{#ImageRoot}/btngrafiek24.png' class='inline-icon24' alt='wandelstatistieken, uitslagen en grafieken voor WSV Wetteren AKTIVIA 010'></a></div></div>
<div class='filterDiv linken2x2rechts'><a href='http://www.wandelclubegmont.be' target='staplijst_link'><img src='{#ImageRoot}/groot/163.jpg' class='logo100' alt='WSV Egmont - Zottegem AKTIVIA 163' align='left'></a><a href='http://www.wandelclubegmont.be' target='staplijst_link'><b>WSV Egmont - Zottegem</b></a>amp;nbsp;<img src='{#ImageRoot}/staplijst-zonnetje.gif' class='inline-icon16' alt='licentiehouder van Staplijst'><br><br>AKTIVIA 163<br><div style='text-align:center;'><a href='{#WebRoot}/wandelclub-wsv-egmont-uit-zottegem-aktivia-163.asp'>alle statistieken en grafiekenamp;nbsp;<img src='{#ImageRoot}/btngrafiek24.png' class='inline-icon24' alt='wandelstatistieken, uitslagen en grafieken voor WSV Egmont - Zottegem AKTIVIA 163'></a></div></div>
<div class='weg filterDiv linken2x2links'><a href='http://www.zandstappers.be' target='staplijst_link'><img src='{#ImageRoot}/groot/A044.jpg' class='logo100' alt='Wandelclub Zandstappers v.z.w. VWF A044' align='left'></a><a href='http://www.zandstappers.be' target='staplijst_link'><b>Wandelclub Zandstappers v.z.w.</b></a>amp;nbsp;<img src='{#ImageRoot}/staplijst-zonnetje.gif' class='inline-icon16' alt='licentiehouder van Staplijst'><br><br>VWF A044<br><div style='text-align:center;'><a href='{#WebRoot}/wandelclub-zandstappers-uit-wechelderzande-vwf-a044.asp'>alle statistieken en grafiekenamp;nbsp;<img src='{#ImageRoot}/btngrafiek24.png' class='inline-icon24' alt='wandelstatistieken, uitslagen en grafieken voor Wandelclub Zandstappers v.z.w. VWF A044'></a></div></div>
<div class='weg filterDiv linken2x2rechts'><a href='http://www.waterhoekstappers.be' target='staplijst_link'><img src='{#ImageRoot}/groot/345.jpg' class='logo100' alt='De Waterhoekstappers - Heestert AKTIVIA 345' align='left'></a><a href='http://www.waterhoekstappers.be' target='staplijst_link'><b>De Waterhoekstappers - Heestert</b></a>amp;nbsp;<img src='{#ImageRoot}/staplijst-zonnetje.gif' class='inline-icon16' alt='licentiehouder van Staplijst'><br><br>AKTIVIA 345<br><div style='text-align:center;'><a href='{#WebRoot}/wandelclub-waterhoekstappers-uit-heestert-aktivia-345.asp'>alle statistieken en grafiekenamp;nbsp;<img src='{#ImageRoot}/btngrafiek24.png' class='inline-icon24' alt='wandelstatistieken, uitslagen en grafieken voor De Waterhoekstappers - Heestert AKTIVIA 345'></a></div></div>
<div class='weg filterDiv linken2x2links'><a href='http://www.stormvogels.be' target='staplijst_link'><img src='{#ImageRoot}/groot/070.jpg' class='logo100' alt='WSV De StormVogels vzw Oostende AKTIVIA 070' align='left'></a><a href='http://www.stormvogels.be' target='staplijst_link'><b>WSV De StormVogels vzw Oostende</b></a>amp;nbsp;<img src='{#ImageRoot}/staplijst-zonnetje.gif' class='inline-icon16' alt='licentiehouder van Staplijst'><br><br>AKTIVIA 070<br><div style='text-align:center;'><a href='{#WebRoot}/wandelclub-stormvogels-uit-oostende-aktivia-070.asp'>alle statistieken en grafiekenamp;nbsp;<img src='{#ImageRoot}/btngrafiek24.png' class='inline-icon24' alt='wandelstatistieken, uitslagen en grafieken voor WSV De StormVogels vzw Oostende AKTIVIA 070'></a></div></div>
<div class='weg filterDiv linken2x2rechts'><a href='http://www.wandelmee.be' target='staplijst_link'><img src='{#ImageRoot}/groot/A054.jpg' class='logo100' alt='wandelmee.be VWF A054' align='left'></a><a href='http://www.wandelmee.be' target='staplijst_link'><b>wandelmee.be</b></a>amp;nbsp;<img src='{#ImageRoot}/staplijst-zonnetje.gif' class='inline-icon16' alt='licentiehouder van Staplijst'><br><br>VWF A054<br><div style='text-align:center;'><a href='{#WebRoot}/wandelmee.asp'>alle statistieken en grafiekenamp;nbsp;<img src='{#ImageRoot}/btngrafiek24.png' class='inline-icon24' alt='wandelstatistieken, uitslagen en grafieken voor wandelmee.be VWF A054'></a></div></div>
<div class='filterDiv linken2x2links'><a href='http://www.velodroomvrienden.be' target='staplijst_link'><img src='{#ImageRoot}/groot/347.jpg' class='logo100' alt='Velodroomvrienden Moorslede AKTIVIA 347' align='left'></a><a href='http://www.velodroomvrienden.be' target='staplijst_link'><b>Velodroomvrienden Moorslede</b></a>amp;nbsp;<img src='{#ImageRoot}/staplijst-zonnetje.gif' class='inline-icon16' alt='licentiehouder van Staplijst'><br><br>AKTIVIA 347<br><div style='text-align:center;'><a href='{#WebRoot}/wandelclub-velodroomvrienden-uit-moorslede-aktivia-347.asp'>alle statistieken en grafiekenamp;nbsp;<img src='{#ImageRoot}/btngrafiek24.png' class='inline-icon24' alt='wandelstatistieken, uitslagen en grafieken voor Velodroomvrienden Moorslede AKTIVIA 347'></a></div></div>
<div class='filterDiv linken2x2rechts'><a href='http://www.sterrebosstappers.be' target='staplijst_link'><img src='{#ImageRoot}/groot/314.jpg' class='logo100' alt='Sterrebosstappers Roeselare AKTIVIA 314' align='left'></a><a href='http://www.sterrebosstappers.be' target='staplijst_link'><b>Sterrebosstappers Roeselare</b></a>amp;nbsp;<img src='{#ImageRoot}/staplijst-zonnetje.gif' class='inline-icon16' alt='licentiehouder van Staplijst'><br><br>AKTIVIA 314<br><div style='text-align:center;'><a href='{#WebRoot}/wandelclub-sterrebosstappers-uit-roeselare-aktivia-314.asp'>alle statistieken en grafiekenamp;nbsp;<img src='{#ImageRoot}/btngrafiek24.png' class='inline-icon24' alt='wandelstatistieken, uitslagen en grafieken voor Sterrebosstappers Roeselare AKTIVIA 314'></a></div></div>
</div>
<script type="text/javascript">
function performFilter() {
var filterArgument = $("#filterargument").val();
// alert(filterArgument);
// $('.filterDiv').filter(':even').css('background-color', '#ffccff');
// $('.filterDiv').filter(':odd').css('background-color', '#c1ffe0');
$('.filterDiv a[href]').filter(':even').css('border', '1px solid red');
$('.filterDiv').css('height','150px').filter(':even').text('text replaced !' filterArgument);
$('.filterDiv').filter(
function(index) {
return $(this).hasClass('weg');
}
).css('background-color', '#c1ffe0');
}
$(document).ready(performFilter);
</script>
Как вы можете видеть выше, я немного поиграл с jQuery, имея в виду конечный результат, позволяющий пользователю вводить некоторые символы в вызываемое поле, filterargument
после чего будут отображаться только <div>
элементы, содержащие введенные символы (остальные будут скрыты с помощью .hide()
метода.
Как всегда, я склонен сначала попробовать что-то маленькое и медленно создавать окончательный код (чтобы полностью понять, что и почему что-то происходит).
Строки с filter(':even')
и filter(':odd')
, похоже, работают, но
$('.filterDiv').filter(
function(index) {
return $(this).hasClass('weg');
}
).css('background-color', '#c1ffe0');
не работает. Я, вероятно, упускаю что-то очевидное (и я, безусловно, попытаюсь найти решение самостоятельно, но в то же время я надеюсь, что некоторые из вас могут указать на мою ошибку.
Заранее спасибо.
Обновить
В результате первого ответа, который я получил, я добавил символ ‘.’ перед filterDiv
. Это было решение.
Ответ №1:
я полагаю, это должно быть
$('.filterDiv').filter....
🙂
Комментарии:
1. это выглядит правильно, идентификатор класса ‘.’ отсутствует.
2. @Nakul 1 за указание на это (я исправил код). К сожалению, он все еще не работает. Точка была типичным случаем ошибки, которую вы не видите сами, пока кто-нибудь не укажет на это.
3. Исправление @Nakul … какой-то другой код, предшествующий отображаемому здесь, препятствовал правильному функционированию. Как только . был на месте (и исправлена другая ошибка), это работает.