All geek questions in one place

Class exists but not found

I am completely puzzled by this. Here is my CSS:

$(window).load(function(){ $('.zichtbaar').removeClass('zichtbaar').addClass('verborgen'); $('#zoekitem').focus(); $('.letter').on('click', function(){ $('.zichtbaar').addClass('verborgen').removeClass('zichtbaar'); var letter = $(this).text(); var klasse = "LETTER-" + letter; var el = $('.' + klasse); alert(klasse + " - " + el.length); $('#alfabet-header').html(letter); el.addClass('zichtbaar').removeClass('verborgen'); }); }); 
  #zoekitem{ font-size: 1.3em; } #letter-header{ height: 32px; color: royalblue; font-size: 1.5em; font-weight: bold; overflow: hidden; } .letter{ float: left; width: 3.7037037037037%; cursor: pointer; text-align: center; } #alfabet-header{ font-size: 5em; font-weight: bold; } .inhoud{ margin-left: 10%; } .verborgen{ display:none; } #zoek-header{ font-size: 2em; } 
 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script> <div id="letter-header"> <div class="letter">A</div> <div class="letter">B</div> <div class="letter">​C</div> <div class="letter">​​D</div> <div class="letter">​E</div> <div class="letter">F</div> <div class="letter">​G</div> <div class="letter">​H</div> <div class="letter">​​I</div> <div class="letter">J</div> <div class="letter">​​K</div> <div class="letter">L</div> <div class="letter">​M</div> <div class="letter">​N</div> <div class="letter">O</div> <div class="letter">​P</div> <div class="letter">​Q</div> <div class="letter">​R</div> <div class="letter">​S</div> <div class="letter">T</div> <div class="letter">​U</div> <div class="letter">V</div> <div class="letter">​W</div> <div class="letter">​X</div> <div class="letter">Y</div> <div class="letter">Z</div> <div class="letter">0-9</div> </div> <br/> <div> <div id="alfabet-header"></div> <div id="zoek-header" class="verborgen">Zoekresultaten voor:</div> <div class="inhoud LETTER-A verborgen"><a href="www.appels.com" target="_blank">Appels</a></div> <div class="inhoud LETTER-B verborgen"><a href="www.boerenkool.com" target="_blank">Boerenkool</a></div> <div class="inhoud LETTER-B verborgen"><a href="www.bonen.com" target="_blank">Bonen</a></div> <div class="inhoud LETTER-B verborgen"><a href="www.bosbessen.com" target="_blank">Bosbessen</a></div> <div class="inhoud LETTER-C verborgen"><a href="www.citrus.com" target="_blank">Citrus</a></div> <div class="inhoud LETTER-K verborgen"><a href="www.kappertjes.com" target="_blank">Kappertjes</a></div> <div class="inhoud LETTER-T verborgen"><a href="www.tuinbonen.com" target="_blank">Tuinbonen</a></div> <div class="inhoud LETTER-W verborgen"><a href="www.wittekool.com" target="_blank">Witte kool</a></div> </div>

When I press A, B or T, everything is fine; The warning shows the number of elements that have the class name I'm looking for and displays them. But when I press C, K or W, the elements, although they obviously exist, are not found.

I have not the slightest hint of a clue why this is happening.

+6
source share
5 answers

You have many Unicode zero space characters in your HTML source, and in particular where there is a “C” field at the beginning of the text. Therefore, when you access the .text() element of an element, it is not just "C".

+12
source

I just check the item. here i found a solution:

enter image description here

+1
source

Your problem is also resolved if you copy my header div div here: they are free of NULL bytes.

 <div class="letter">A</div> <div class="letter">B</div> <div class="letter">C</div> <div class="letter">D</div> <div class="letter">E</div> <div class="letter">F</div> <div class="letter">G</div> <div class="letter">H</div> <div class="letter">I</div> <div class="letter">J</div> <div class="letter">K</div> <div class="letter">L</div> <div class="letter">M</div> <div class="letter">N</div> <div class="letter">O</div> <div class="letter">P</div> <div class="letter">Q</div> <div class="letter">R</div> <div class="letter">S</div> <div class="letter">T</div> <div class="letter">U</div> <div class="letter">V</div> <div class="letter">W</div> <div class="letter">X</div> <div class="letter">Y</div> <div class="letter">Z</div> <div class="letter">0-9</div>
+1
source

Unicode Unicode characters removed .. check below snippet

 $(window).load(function(){ $('.zichtbaar').removeClass('zichtbaar').addClass('verborgen'); $('#zoekitem').focus(); $('.letter').on('click', function(){ $('.zichtbaar').addClass('verborgen').removeClass('zichtbaar'); var letter = $(this).text(); var klasse = "LETTER-" + letter; var el = $('.' + klasse); alert(klasse + " - " + el.length); $('#alfabet-header').html(letter); el.addClass('zichtbaar').removeClass('verborgen'); }); }); 
 #zoekitem{ font-size: 1.3em; } #letter-header{ height: 32px; color: royalblue; font-size: 1.5em; font-weight: bold; overflow: hidden; } .letter{ float: left; width: 3.7037037037037%; cursor: pointer; text-align: center; } #alfabet-header{ font-size: 5em; font-weight: bold; } .inhoud{ margin-left: 10%; } .verborgen{ display:none; } #zoek-header{ font-size: 2em; } 
 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div id="letter-header"> <div class="letter">A</div> <div class="letter">B</div> <div class="letter">C</div> <div class="letter">D</div> <div class="letter">E</div> <div class="letter">F</div> <div class="letter">G</div> <div class="letter">H</div> <div class="letter">I</div> <div class="letter">J</div> <div class="letter">K</div> <div class="letter">L</div> <div class="letter">M</div> <div class="letter">N</div> <div class="letter">O</div> <div class="letter">P</div> <div class="letter">Q</div> <div class="letter">R</div> <div class="letter">S</div> <div class="letter">T</div> <div class="letter">U</div> <div class="letter">V</div> <div class="letter">W</div> <div class="letter">X</div> <div class="letter">Y</div> <div class="letter">Z</div> <div class="letter">0-9</div> </div> <br/> <div> <div id="alfabet-header"></div> <div id="zoek-header" class="verborgen">Zoekresultaten voor:</div> <div class="inhoud LETTER-A verborgen"><a href="www.appels.com" target="_blank">Appels</a></div> <div class="inhoud LETTER-B verborgen"><a href="www.boerenkool.com" target="_blank">Boerenkool</a></div> <div class="inhoud LETTER-B verborgen"><a href="www.bonen.com" target="_blank">Bonen</a></div> <div class="inhoud LETTER-B verborgen"><a href="www.bosbessen.com" target="_blank">Bosbessen</a></div> <div class="inhoud LETTER-C verborgen"><a href="www.citrus.com" target="_blank">Citrus</a></div> <div class="inhoud LETTER-K verborgen"><a href="www.kappertjes.com" target="_blank">Kappertjes</a></div> <div class="inhoud LETTER-T verborgen"><a href="www.tuinbonen.com" target="_blank">Tuinbonen</a></div> <div class="inhoud LETTER-W verborgen"><a href="www.wittekool.com" target="_blank">Witte kool</a></div> </div>
0
source

From @Pointy anwswer you can remove this zero space without changing the view. Srcipt to remove this space .replace(/\u200B/g,'');

So your script will look like a fragment of it

 $(window).load(function () { $('.zichtbaar').removeClass('zichtbaar').addClass('verborgen'); $('#zoekitem').focus(); $('.letter').on('click', function () { $('.zichtbaar').addClass('verborgen').removeClass('zichtbaar'); var letter = '' + $(this).text().replace(/\u200B/g,''); var klasse = "LETTER-" + letter; var el = $('.' + klasse); alert(klasse + " - " + el.length); $('#alfabet-header').html(letter); el.addClass('zichtbaar').removeClass('verborgen'); }); }); 
 #zoekitem{ font-size: 1.3em; } #letter-header{ height: 32px; color: royalblue; font-size: 1.5em; font-weight: bold; overflow: hidden; } .letter{ float: left; width: 3.7037037037037%; cursor: pointer; text-align: center; } #alfabet-header{ font-size: 5em; font-weight: bold; } .inhoud{ margin-left: 10%; } .verborgen{ display:none; } #zoek-header{ font-size: 2em; } 
 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div id="letter-header"> <div class="letter">A</div> <div class="letter">B</div> <div class="letter">​C</div> <div class="letter">​​D</div> <div class="letter">​E</div> <div class="letter">F</div> <div class="letter">​G</div> <div class="letter">​H</div> <div class="letter">​​I</div> <div class="letter">J</div> <div class="letter">​​K</div> <div class="letter">L</div> <div class="letter">​M</div> <div class="letter">​N</div> <div class="letter">O</div> <div class="letter">​P</div> <div class="letter">​Q</div> <div class="letter">​R</div> <div class="letter">​S</div> <div class="letter">T</div> <div class="letter">​U</div> <div class="letter">V</div> <div class="letter">​W</div> <div class="letter">​X</div> <div class="letter">Y</div> <div class="letter">Z</div> <div class="letter">0-9</div> </div> <br/> <div> <div id="alfabet-header"></div> <div id="zoek-header" class="verborgen">Zoekresultaten voor:</div> <div class="inhoud LETTER-A verborgen"><a href="www.appels.com" target="_blank">Appels</a></div> <div class="inhoud LETTER-B verborgen"><a href="www.boerenkool.com" target="_blank">Boerenkool</a></div> <div class="inhoud LETTER-B verborgen"><a href="www.bonen.com" target="_blank">Bonen</a></div> <div class="inhoud LETTER-B verborgen"><a href="www.bosbessen.com" target="_blank">Bosbessen</a></div> <div class="inhoud LETTER-C verborgen"><a href="www.citrus.com" target="_blank">Citrus</a></div> <div class="inhoud LETTER-K verborgen"><a href="www.kappertjes.com" target="_blank">Kappertjes</a></div> <div class="inhoud LETTER-T verborgen"><a href="www.tuinbonen.com" target="_blank">Tuinbonen</a></div> <div class="inhoud LETTER-W verborgen"><a href="www.wittekool.com" target="_blank">Witte kool</a></div> </div>
0
source

Source: https://habr.com/ru/post/1012447/

More articles:


All Articles