Warum gibt meine JQuery init [0] Länge 0 zurück?

Question

Dies ist meine erste jQuery, ich schreibe Code nach einem Tutorial (kein jquery tutorial, also gab es keine Hilfe für dieses Problem), aber ich möchte verstehen, was passiert, weil es viele neue Ebenen gibt. Der ursprüngliche Code neu geschrieben von babel so bin ich nicht sicher, ob es ist, weil ein neuer Standard dieser Code nicht in modernen Browsern gemacht hat:

Originalcode

:

import $ from 'jquery'; 

class MobileMenu{ 
    constructor() { 
     this.menuIcon = $(".site-header__menu-icon"); 
     this.menuContent = $("site-header__menu-content"); 
     this.events(); 
    } 

    events() { 
     this.menuIcon.click(this.toggleTheMenu.bind(this)); 
    } 

    toggleTheMenu() { 
     console.log(this.menuContent); 
     this.menuContent.toggleClass("site-header__menu-content--is-visible"); 
    } 

} 



export default MobileMenu; 

Babel Code erstellt:

var MobileMenu = function() { 
    function MobileMenu() { 
    _classCallCheck(this, MobileMenu); 

    this.menuIcon = (0, _jquery2.default)(".site-header__menu-icon"); 
    this.menuContent = (0, _jquery2.default)("site-header__menu-content"); 
    this.events(); 
} 

_createClass(MobileMenu, [{ 
    key: "events", 
    value: function events() { 
     this.menuIcon.click(this.toggleTheMenu.bind(this)); 
    } 
}, { 
    key: "toggleTheMenu", 
    value: function toggleTheMenu() { 
     console.log(this.menuContent); 
     this.menuContent.toggleClass("site-header__menu-content--is-visible"); 
    } 
}]); 

return MobileMenu; 
}(); 

exports.default = MobileMenu; 

Es gibt:

[prevObject: jQuery.fn.init(1)] 
length:0 
prevObject:[document] 
__proto__:Object(0) 

statt meiner erwarteten Klasse, die ich will ein ausführen Aktion an.

Unten ist das Snippet von HTML, das die Klasse enthält, habe ich auf Tippfehler im Namen überprüft und nicht sehr hilfreiche Informationen gefunden, wenn ich gegooglet habe, warum jQuery init (1) und Länge: 0 zurückgibt. Ich fand: Why is my JQuery selector returning a n.fn.init[0], and what is it?, aber es schien sehr spezifisch für diese Instanz und ich hoffte auf allgemeinere Informationen. Ich mache keine dynamischen Seitenladungen. Aus dieser Frage entnehme ich, dass meine jquery ein leeres Ergebnisobjekt zurückgibt. Ist das ein richtiges Verständnis und was sollte ich zuerst in meinem Debugging überprüfen? Ich habe einen Haltepunkt im Chrome-Debugger gesetzt, habe aber immer noch das Objekt, aber mit zwei Elementen im Array, wobei das erste Element das Objekt ist, auf das ich geklickt habe, um die Jquery auszulösen. Hier

<div class="site-header__menu-icon"></div> 
    <div class="wrapper site-header__menu-content"> 
     <a href="#" class="btn site-header__btn">Get in Touch</a> 
     <nav class="primary-nav primary-nav--pull-right"> 
     <ul> 
      <li><a href="#our-beginning">Our Beginning</a></li> 
      <li><a href="#features">Features</a></li> 
      <li><a href="#testimonials">Testimonials</a></li> 
     </ul> 
     </nav> 
    </div> 
</div> 

ist die babel-Modul:

module: { 
    loaders: [ 
     { 
      loader: 'babel-loader', 
      query: { 
       presets: ['es2015'] 
      }, 
      test: /\.js$/, 
      exclude: /node_modules/ 
     } 
    ] 
} 

Answer 1

Der Wähler jQuery nicht erkennt $ ("site-header__menu-content"). Das '.' Präfix ist notwendig, um auf eine Klasse zu verweisen, wie Sie sie bei $ (". site-header__menu-icon") verwendet haben.

Verwenden Sie das Präfix # für IDs,. Präfix für Klassen und kein Präfix für Elementtypen wie div, img, p usw.

Answer 2

Wie von Satpal erwähnt, fehlte mir ein. in meiner Klassenauswahl. Leute, die neu zu jQuery sind, sollten auf ihre spezielle Abfrage verweisen, um eine schnelle Antwort zu finden: https://api.jquery.com/category/selectors/ .