私のJQueryがinit [0]の長さ0を返すのはなぜですか？

Question

これは私の最初のjqueryです。私はチュートリアル（jqueryチュートリアルではないので、この問題のヘルプはありませんでした）に続いてコードを書いていますが、新しいレイヤーがたくさんあるので、

オリジナルコード：

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; 

バベルがコードを作成：元のコードはバベルで書き換えているので、私は新しい規格は、このコードは、最近のブラウザでは動作しないようにしているので、それがあるかどうかわからないんだけど

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; 

それは返します：私が実行したい私の期待クラスの代わりに

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

〜に対する行動。

以下は、クラスを含むhtmlのスニペットです。私は名前の誤字をチェックして、jQueryがinit（1）とlength：0を返す理由についてグーグル・グーグルで非常に有用な情報を見つけませんでした。私は見つけた：Why is my JQuery selector returning a n.fn.init[0], and what is it?しかし、それは非常に特定のインスタンスに見えたと私はより一般的な情報を期待していた。私は動的なページの読み込みをしていません。その質問から、私のjqueryが空の結果オブジェクトを返すことがわかります。それは正しい理解であり、私はデバッグで何を最初にチェックすべきですか？私はクロムデバッガにブレークポイントを設定しましたが、まだオブジェクトがありますが、最初の要素がjqueryをトリガするためにクリックされたオブジェクトである2つの要素が配列にあります。ここで

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

はバベルのモジュールです：

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

Answer 1

jQueryのセレクタは$（ "サイトheader__menu-コンテンツ"）を認識しません。 '。' $（ "。site-header__menu-icon"）で使用したように、クラスを参照するには接頭辞が必要です。

IDには＃接頭辞を使用します。クラスの接頭辞、div、img、pなどの要素型の接頭辞はありません。

Answer 2

私が欠席していたようです。私のクラスセレクタで。 jqueryを初めて使用する人は、具体的な質問で https://api.jquery.com/category/selectors/ を参照する必要があります。