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.

1
  • 4
    You have a lot of %u200B zero width spaces in your html markup. Nov 18, 2016 at 13:22

5 Answers 5

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".

6
  • 1
    Out of curiosity, how did you manage to find this from the OP's copy-paste ?
    – roberto06
    Nov 18, 2016 at 13:25
  • 5
    If you paste it into for example JSFiddle it'll highlight them.
    – Olaf
    Nov 18, 2016 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, 2016 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, 2016 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, 2016 at 13:40
1

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

enter image description here

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>

2
  • 1
    Why would you do this instead of just fixing the HTML source?
    – Pointy
    Nov 18, 2016 at 13:47
  • because the source of view may not under his control
    – Aroniaina
    Nov 18, 2016 at 13:47
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>
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>

0

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Not the answer you're looking for? Browse other questions tagged or ask your own question.