Warum erhalte ich die Meldung "Uncaught TypeError: Cannot read property" Fehler mit dieser variable?

In dieses jsFiddle ich habe zwei Variablen, die würden entweder undefined oder null. Das script funktioniert, wenn die erste variable ist initialisiert, aber nicht, wenn die zweite verwendet wird. Sie können dies testen, indem auskommentieren und das script ausgeführt.

Dies ist der code:

var test = $('.not-here').height(); //works with this variable
var test2 = $('.also-not-here').offset().top; //doesn't work with this

$('#output').append('yeah');

Warum habe ich dieses problem und wie bekomme ich es?

  • Sie können nicht de-Referenz etwas, das nicht definiert ist. Das ist alles dort ist zu ihm. Wenn ein jQuery Selektor gibt keine Elemente, jQuery, dennoch gibt eine leere Menge (also etwas, das IST definiert). Wenn Sie anrufen .offset() auf eine leere Menge, so ist undefiniert. Also... Man kann nicht eine Methode aufzurufen, die auf die return-Wert (offset) in diesem Fall.
  • Uncaught TypeError: Cannot read property 'top' von null
  • Das Problem ist, dass $('.also-not-here') ist eigentlich eine (leere) Liste, in der Erwägung, dass $('.also-not-here').offset() ist wirklich undefined.
  • Oder um es anders auszudrücken, jQuery schützt Sie von undefined und null, aber sobald man sich von seinem Schutz, Sie müssen mit sich selbst.
InformationsquelleAutor shrewdbeans | 2013-04-17
  1. 3

    Sowohl Ihre Selektoren ungültig sind, als solche sind Sie wieder eine leere jQuery-Ergebnis-Liste.

    Aufrufen .height() auf eine leere Ergebnis-Liste zurück null.
    Aufruf .offset() auf eine leere Ergebnis-Liste gibt auch null.

    Der Grund, warum Sie bekommen Uncaught TypeError: Cannot read property 'top' of null in der zweiten Zeile ist, weil Sie versuchen, rufen Sie .top() auf das Ergebnis offset() die null.

    Grundsätzlich Sie versuchen zu führen null.top().

    Ich weiß nicht, was Ihr code ist, sondern als reines Beispiel, könnten Sie die Resultate überprüfen, die erste vor der Verwendung, ähnlich zu diesem:

    var $elem1 = $('.not-here');
var $elem2 = $('.also-not-here');

if($elem1.length && $elem2.length){
    var test = $elem1.height();
    var test2 = $elem2.offset().top;

    $('#output').append('yeah');
}
    • Sehr anschaulich erklärt, danke François.
    InformationsquelleAutor Nope
  2. 1

    $('.also-not-here').offset() zurück null wenn der Knoten nicht existiert. Das ist, wie es funktioniert by design.

    Als Sie wollen einen fix, damit der code nicht zu brechen, können Sie etwas wie das hier tun: 

    var $node = $('.also-not-here');
var test2 = $node.length>0 ? $node.offset().top : null;
    • +1 für den schönen und kompakten code
    InformationsquelleAutor fmsf
  3. 1
    var test = $('.not-here').height();

    Diese zurück null, da es kein element $('.not-here').

    Wieder, 

    var test2 = $('.also-not-here').offset();

    Diese auch zurück null, da es kein element $('.also-not-here') und wir können nicht Lesen-Eigenschaft top null.

    Ich würde vorschlagen, dies zu tun:

    $.fn.isThere = function(){ return this.length > 0; }

var $selector = $('.also-not-here');
if ($selector.isThere()) {
    var test2 = $selector.offset().top;
}
    • -1 für denselben Selektor zweimal
    • wie wäre es damit?
    • entfernt die -1, sorry, es ist wirklich eine schlechte Praxis ist, besonders da Sie geben Sie ein Beispiel einer person lernen.
    • Ich entschuldige mich dafür. Ich cache in der Regel alle Elemente, wenn Sie öfter als einmal verwendet. Danke für den Hinweis it out!
    InformationsquelleAutor palaѕн
  4. 0

    Den ersten test ist immer auf null gesetzt. Der zweite Fall, Sie versuchen, Referenz ist eine Eigenschaft der Wert null wird eine exception zu werfen.

    InformationsquelleAutor scrappedcola
Schreibe einen Kommentar