How to get parent value of div a value

Question

I have html code:

<div class="top-menu">
  <div class="dropdown dropdown-inline">
    <a class="btn btn-primary dropdown-toggle" id="info" data-hover="dropdown" data-animations="zoomIn zoomIn zoomIn zoomIn" aria-expanded="false" >INFO</a>
  </div>
  <div class="dropdown dropdown-inline">
    <a class="btn btn-primary dropdown-toggle" data-hover="dropdown" data-animations="zoomIn zoomIn zoomIn zoomIn" aria-expanded="false">MAINITEM <span class="carot"></span></a>
    <ul class="dropdown-menu dropdownhover-bottom" role="menu">
      <li><a>A</a></li>
      <li><a>B</a></li>
      <li><a>C</a></li>
    </ul>
  </div>

I need when i click on li element (A, B or C) to get value of MAINITEM. I have around 10main items on page and need to get this MAINITEM of value.

I try using:

$("a.btn.btn-primary.dropdown-toggle, ul.dropdown-menu.dropdownhover-bottom li a").on('click', function () {
  alert($(this).closest('.dropdown-toggle').find('a').text());
})

But i get empty result.

Answer 1

Use this

http://jsfiddle.net/o90wnmuL/

 jQuery(".dropdown li a").click(function(){
   text =  jQuery(this).closest(".dropdown").find(".dropdown-toggle").text();
   console.log(text)
});