title: Can't access specific element using parent and child jquery methods
body: <p>I'm trying to access .sub-menu element and all its contents on the hovered anchor rom the most outer children. Here in the code below this would be the Sports link. </p>
  
  <p>I've tried using a couple of methods as below on console.log to access it</p>
  
  <pre><code>var $desktopMenu = $('.desktop-menu');
  
  $desktopMenu.on('mouseenter', 'a', function(){
      console.log($(this).parent().html());             // &lt;a href="" &gt; Menu Item&lt;/a&gt;
      console.log($(this).parent().parent().html());    // all html inside 'desktop-menu 
      console.log($(this).next().html());               // undefined
      console.log($(this).parents('.sub-menu').html());               // undefined
      console.log($(this).find('.sub-menu').html());               // undefined
  });
  </code></pre>
  
  <p>HTML</p>
  
  <pre><code>&lt;ul class="desktop-menu"&gt;
     &lt;li class=""&gt;&lt;a href="#"&gt;Sports&lt;/a&gt;&lt;/li&gt;
     &lt;li class="sub-menu"&gt;
        &lt;div class="container"&gt;
            &lt;ul&gt;
               &lt;li class="heading"&gt;&lt;a href="#"&gt;Running&lt;/a&gt;&lt;/li&gt;
               &lt;li&gt;&lt;a href="#"&gt;Footwear&lt;/a&gt;&lt;/li&gt;
            &lt;/ul&gt;
         &lt;/div&gt;
  </code></pre>
  
  <p>I'm consfused as to why the parent() methods arent working as expected. Surely the parent() of this  will be li and parent().parent() would be the next  not desktop-menu ul? Any ideas why this is? thanks</p>
  
  <p>EDIT: Added two of the suggestions below to things i've tried.</p>