7

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.

Jyothi Babu Araja
  • 10,076
  • 3
  • 31
  • 38
johannes
  • 1,270
  • 12
  • 19

5 Answers5

12

You've got a lot of Unicode zero-width space characters in your HTML source, and in particular there's one at the beginning of the text for the "C" box. When you access the .text() of the element, therefore, it's not just "C".

Pointy
  • 405,095
  • 59
  • 585
  • 614
  • 1
    Out of curiosity, how did you manage to find this from the OP's copy-paste ? – roberto06 Nov 18 '16 at 13:25
  • 5
    If you paste it into for example JSFiddle it'll highlight them. – Olaf Nov 18 '16 at 13:27
  • So I cannot simply use the "C" in my HTML? Is that right? Or do I have to access it in a different way in the javascript? What is the solution? – johannes Nov 18 '16 at 13:35
  • 2
    @johannes the solution is to get rid of the garbage characters in your HTML source. They probably were introduced by some copy/paste operations; I don't know because I know nothing of how you made that source file. – Pointy Nov 18 '16 at 13:39
  • This happens a lot with Adobe's Dreamweaver more than any other IDE I've seen. There are IDEs with plugins to prevent this, see if yours has one. – Kyle Nov 18 '16 at 13:40
  • Thanks all. I am making the site in Microsoft Sharepoint. Because I don't like programming in Sharepoint, I made typed the scripts and the html in netbeans and then copy-pasted. Won't do that again. – johannes Nov 18 '16 at 13:44
1

i just inspect the element. here i found the solution:

enter image description here

SURJEET SINGH Bisht
  • 881
  • 10
  • 16
1

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

So your script will be like int his snippet

$(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>
Aroniaina
  • 1,252
  • 13
  • 31
0

Removed unwanted Unicode characters.. 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>
srinivas.ln
  • 309
  • 2
  • 6
0

Your problem is also solved if you copy my letter-header div here: these 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>
Stephan Hovius
  • 391
  • 1
  • 6