title: Why is my JQuery returning init[0] length 0?
body: <p>This is my first jquery, I'm writing code following a tutorial (not a jquery tutorial, so there was no help for this issue) but want to understand what is happening better because there are a lot of new layers. The original code is re-written by babel so I'm not sure if it is because a new standard has made this code not work in modern browsers:</p>
  
  <p>Original code:</p>
  
  <pre><code>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;
  </code></pre>
  
  <p>Babel created code:</p>
  
  <pre><code>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;
  </code></pre>
  
  <p>It returns:</p>
  
  <pre><code>[prevObject: jQuery.fn.init(1)]
  length:0
  prevObject:[document]
  __proto__:Object(0)
  </code></pre>
  
  <p>instead of my expected class that I want to perform an action on.</p>
  
  <p>Below is the snippet of html that contains the class, I've checked for typos in the name and didn't find very much helpful information when I googled for why jQuery returns init(1) and length:0. I found: <a href="https://stackoverflow.com/q/34494873/5555155">Why is my JQuery selector returning a n.fn.init[0], and what is it?</a> but it seemed very specific to that instance and I was hoping for more general information. I'm not doing dynamic page loads. From that question though I gather that my jquery is returning an empty result object. Is that a correct understanding and what should I check first in my debugging? I set a breakpoint in chrome debugger but still just got the object but with two elements in the array with the first element being the object I clicked on to trigger the jquery.  </p>
  
  <pre><code>    &lt;div class="site-header__menu-icon"&gt;&lt;/div&gt;
      &lt;div class="wrapper site-header__menu-content"&gt;
        &lt;a href="#" class="btn site-header__btn"&gt;Get in Touch&lt;/a&gt;
        &lt;nav class="primary-nav primary-nav--pull-right"&gt;
          &lt;ul&gt;
            &lt;li&gt;&lt;a href="#our-beginning"&gt;Our Beginning&lt;/a&gt;&lt;/li&gt;
            &lt;li&gt;&lt;a href="#features"&gt;Features&lt;/a&gt;&lt;/li&gt;
            &lt;li&gt;&lt;a href="#testimonials"&gt;Testimonials&lt;/a&gt;&lt;/li&gt;
          &lt;/ul&gt;
        &lt;/nav&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>Here is the babel module:</p>
  
  <pre><code>module: {
      loaders: [
          {
              loader: 'babel-loader',
              query: {
                  presets: ['es2015']
              },
              test: /\.js$/,
              exclude: /node_modules/
          }
      ]
  }
  </code></pre>