类确实存在但找不到答案

【问题标题】：Class does exist but is not found类确实存在但找不到
【发布时间】：2017-04-02 08:45:38
【问题描述】：

我对此感到非常困惑。这是我的 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 时，这些元素虽然明显存在，但却找不到。

我一点也不知道为什么会发生这种情况。

【问题讨论】：

您的 html 标记中有很多 %u200B 零宽度空格。

标签： javascript jquery html css classname

【解决方案1】：

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

【讨论】：

出于好奇，您是如何从 OP 的复制粘贴中找到这个的？
如果您将其粘贴到例如 JSFiddle 中，它将突出显示它们。
所以我不能简单地在我的 HTML 中使用“C”吗？那正确吗？还是我必须在 javascript 中以不同的方式访问它？解决办法是什么？
@johannes 解决方案是去掉 HTML 源代码中的垃圾字符。它们可能是由一些复制/粘贴操作引入的；我不知道，因为我不知道你是如何制作那个源文件的。
这种情况在 Adobe 的 Dreamweaver 中发生的次数比我见过的任何其他 IDE 都多。有一些带有插件的 IDE 可以防止这种情况发生，看看你的有没有。

【解决方案2】：

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

【讨论】：

【解决方案3】：

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

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

【讨论】：

【解决方案4】：

删除了不需要的 Unicode 字符.. 检查下面的 sn-p

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

【讨论】：

【解决方案5】：

从@Pointy anwswer，您可以删除这些零空间，而无需更改视图。删除这些空间的脚本是.replace(/\u200B/g,'');

所以你的脚本会像 int his sn-p

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

【讨论】：

你为什么要这样做而不是仅仅修复 HTML 源代码？
因为视源可能不在他的控制之下