How do I get text of parent and its parent on clicking a navbar tag

When I click A1-810 I am getting output as

A1-810
ICONIA A-SERIES

Now I want output as

A1-810
ICONIA A-SERIES
Acer

Jquery Code Kindly ignore closing brackets

      $(document).ready(function() {
        $(".list-unstyled a").on("click", function(e) {
        e.preventDefault(); // don't follow the link
        var anchortext = $(this).text();
        var parenttext = $(this).closest("ul").prev("a").text();
        console.log(anchortext , parenttext)
         });
          });

HTML CODE

           <ul class="nav navbar-nav">
              <li class="dropdown">
                <a href="#" class="dropdown-togg main">Cellphone Parts</a>
                <div class="dropdown-menu pull-right">
                  <div class="dropdown-inner">
                    <ul class="list-unstyled">
                      <li class="dropdown">
                        <a href="#" class="dropdown-togg">Acer</a>
                        <div class="nav-dropdown-content">
                          <ul class="list-unstyled">
                            <li class="dropdown">
                              <a href="#" class="dropdown-togg"
                                >ICONIA A-SERIES</a
                              >
                              <ul class="list-unstyled">
                                <li><a href="#">A1-810</a></li>
                                <li><a href="#">A1-830</a></li>
                                    </ul>
                                   </li>
                                  </ul>
                                 </div>
                                </li>
                               </ul>

Answer

Here is a method that I’ve tried to make bullet proof.

$(document).ready(function() {
  $(".list-unstyled a").on("click", function(e) {
    e.preventDefault(); // don't follow the link
    var anchortext = $(this).text();
    var parentText = [];
    parentText = getParentText($(this), parentText, 1);
    //var parenttext = $(this).closest("ul").prev("a").text();
    console.log(anchortext, parentText.join(", "))
  });

  function getParentText(ele, arr, count = 0) {
    var f = false;
    var i = 0;
    while (!f && i < 10 && count > 0) {
      if ($(ele).parent().prev("a").length > 0) {
        arr.push($(ele).parent().prev("a").text())
        f = true;
      }
      ele = $(ele).parent();
      i++;
    }
    if (f && count > 0) {
      arr = getParentText(ele, arr, (count - 1));
    }
    return arr;
  }
});

The function getParentText takes 3 parameters (2 required and 1 optional)

ele is the element we want to search from.
arr is the array where we want to added the results to.
count is how many times we want to loop.

Demo

$(document).ready(function() {
  $(".list-unstyled a").on("click", function(e) {
    e.preventDefault(); // don't follow the link
    var anchortext = $(this).text();
    var parentText = [];
    parentText = getParentText($(this), parentText, 2);
    //var parenttext = $(this).closest("ul").prev("a").text();
    console.log(anchortext, parentText.join(", "))
  });

  function getParentText(ele, arr, count = 0) {
    var f = false;
    var i = 0;
    while (!f && i < 10 && count > 0) {
      if ($(ele).parent().prev("a").length > 0) {
        arr.push($(ele).parent().prev("a").text())
        f = true;
      }
      ele = $(ele).parent();
      i++;
    }
    if (f && count > 0) {
      arr = getParentText(ele, arr, (count - 1));
    }
    return arr;
  }
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<ul class="nav navbar-nav">
  <li class="dropdown">
    <a href="#" class="dropdown-togg main">Cellphone Parts</a>
    <div class="dropdown-menu pull-right">
      <div class="dropdown-inner">
        <ul class="list-unstyled">
          <li class="dropdown">
            <a href="#" class="dropdown-togg">Acer</a>
            <div class="nav-dropdown-content">
              <ul class="list-unstyled">
                <li class="dropdown">
                  <a href="#" class="dropdown-togg">ICONIA A-SERIES</a>
                  <ul class="list-unstyled">
                    <li><a href="#">A1-810</a></li>
                    <li><a href="#">A1-830</a></li>
                  </ul>
                </li>
              </ul>
            </div>
          </li>
        </ul>
      </div>
    </div>
  </li>
</ul>

Leave a Reply

Your email address will not be published. Required fields are marked *