I am absolutely baffled bu this. Here's 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 click A, B, or T everything is fine; The alert shows the number of elements that have the classname that I'm looking for and displays them. But when I click C, K or W, the elements, although they clearly exist, are not found.
I haven't got the palest shade of a clue as to why this happens.
%u200B
zero width spaces in your html markup.