Почему этот фильтр jQuery () с анонимной функцией не работает

#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 … какой-то другой код, предшествующий отображаемому здесь, препятствовал правильному функционированию. Как только . был на месте (и исправлена другая ошибка), это работает.