1. Dom
  2. Pytanie i odpowiedź
  3. Klasa istnieje, ale nie została znaleziona.

Klasa istnieje, ale nie została znaleziona.

2016-11-18 18 views
6

Jestem absolutnie zaskoczony tym. Oto mój CSS:Klasa istnieje, ale nie została znaleziona.

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

Kiedy klikam A, B lub T, wszystko jest w porządku; Alert pokazuje liczbę elementów, które mają poszukiwaną nazwę klasy i wyświetla je. Ale kiedy klikam C, K lub W, elementy, choć wyraźnie istnieją, nie zostaną znalezione.

Nie mam najmniejszego odcienia pojęcia, dlaczego tak się dzieje.

Źródło

2016-11-18 johannes

+4

Masz dużo '% u200B' zerowych obowiązuje szerokość w znaczniki HTML. – epascarello

Odpowiedz

12

Masz wiele znaków Unicode o zerowej szerokości w źródle HTML, w szczególności na początku tekstu w polu "C". Kiedy uzyskujesz dostęp do elementu .text() tego elementu, nie jest to po prostu "C".

Źródło

2016-11-18 13:22:19 Pointy

+1

Z ciekawości, jak udało ci się to znaleźć z kopiuj-wklej OP? – roberto06

+5

Jeśli wkleisz go na przykład w JSFiddle, podświetli je. – Devilscomrade

+0

Więc nie mogę po prostu użyć "C" w moim HTML? Czy to prawda? Czy muszę mieć do niego dostęp w inny sposób w javascript? Jakie jest rozwiązanie? – johannes

0

Usunięto niechciane znaki Unicode .. sprawdź poniżej 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>

Źródło

2016-11-18 13:29:51 cna327

1

ja po prostu sprawdzić element. tutaj znalazłem rozwiązanie:

enter image description here

Źródło

2016-11-18 13:32:44

1

Twój problem jest rozwiązany również jeśli skopiować mój list-nagłówka div tutaj: są wolne od NULL bajtów.

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

Źródło

2016-11-18 13:38:03

0

Z @Pointy anwswer można usunąć te puste miejsca bez zmiany widoku. Srcipt usunąć te miejsca jest .replace(/\u200B/g,'');

Więc skrypt będzie jak int swoim fragmencie

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

Źródło

2016-11-18 13:46:24 Aroniaina

+1

Dlaczego zrobiłbyś to zamiast tylko poprawiania źródła HTML? – Pointy

+0

, ponieważ źródło wyświetlenia może nie być pod jego kontrolą – Aroniaina

Powiązane problemy

 Powiązane problemy