Class 确实存在但未找到

Question

我对此感到非常困惑。这是我的 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>

当我点击 A、B 或 T 时一切正常；警报显示具有我正在查找的类名的元素的数量并显示它们。但是当我点击C、K或W时，明明存在的元素却找不到。

对于为什么会发生这种情况，我一点头绪都没有。

Answer 1

您的 HTML 源代码中有很多 Unicode 零宽度 space 字符，特别是 "C" 框的文本开头有一个字符.因此，当您访问元素的 .text() 时，它不仅仅是 "C".

Answer 2

删除了不需要的 Unicode 字符.. 检查下面的代码段

$(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>

Answer 3

我只是检查元素。我在这里找到了解决方案：

Answer 4

如果你在这里复制我的信头div，你的问题也解决了：这些没有空字节。

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

Answer 5

来自@Pointy 的回答，您可以删除这些零 space，而无需更改视图。删除这些 space 的脚本是 .replace(/\u200B/g,'');

所以你的脚本会像他的片段一样

$(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>

Class 确实存在但未找到

Class does exist but is not found

html

javascript

css

jquery

classname