类确实存在但未找到

Question

我对这个感到非常困惑。这是我的CSS：

＆＃13;

＆＃13;

        $(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');

           });

        });

＆＃13;

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

        }

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

当我点击A，B或T时，一切都很好;警报显示具有我正在寻找的类名的元素数量并显示它们。但是当我点击C，K或W时，这些元素虽然明显存在，却找不到。

我还没有找到最简单的线索，说明为什么会发生这种情况。

Answer 1

你的HTML源代码中有很多Unicode零宽度空格字符，特别是在“C”框的文本开头有一个。因此，当您访问元素的WebClient client = new WebClient; HtmlPage page = client.getPage("http://www.exapmle.com"); client.waitForBackgroundJavaScript(5 * 1000); Thread.sleep(10*1000);// this code will waite to 10 seconds HtmlUnorderedList ul = (HtmlUnorderedList) page.getByXPath("//ul[contains(@class, 'class-name')]").get(0); HtmlListItem li = (HtmlListItem) ul.getChildNodes().get(1); // I want to click li and get result page. But it takes a little time to execute. li.click(); client.waitForBackgroundJavaScript(5 * 1000); // this code will waite to 10 seconds Thread.sleep(10*1000); 时，它不仅仅是“C”。

Answer 2

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

Answer 3

删除了不需要的Unicode字符..请查看以下代码段

jmap

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

Answer 4

如果你在这里复制我的letter-header 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>

Answer 5

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

所以你的脚本就像他的代码片段

＆＃13;

＆＃13;

$(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');
    });
});

＆＃13;

#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;
}

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;