title: How to get the ancestors of a JS tree node when it is selected?
body: <p>I am getting the child tree name but I want to get its complete hierarchy of parent node names. </p>
  
  <p>Below code shows how I get the child node and print its value in a particular div element:</p>
  
  <pre><code>$(document).ready(function () {
      $('#bdeViewNew').on('changed.jstree', function (e, data) {
          var i, j, r = [];
  
          for (i = 0, j = data.selected.length; i &lt; j; i++) {
              r.push(data.instance.get_node(data.selected[i]).text.trim());
              $('#treeBreadCrumbs').html(r.join(', '));
          }
      });
  });
  </code></pre>
  
  <p>Now it prints the value of child node, e.g. <code>Child a</code>. But I want something like follows, if the tree structure is as shown below:</p>
  
  <pre><code>Parent
    Child 1
      Child a
      Child b
    Child 2
      Child c
      Child d
  </code></pre>
  
  <p>so if I click on <code>Child a</code> I want my div content updated as </p>
  
  <pre><code>Parent &gt; Child 1 &gt; Child a
  </code></pre>
  
  <p>as of now I am getting <code>Child a</code> only. Please let me know how I can get the correct output.</p>
  
  <p>I tried like this as shown below to get path of all the parent node:</p>
  
  <pre><code>$(document).ready(function() {
  $('#bdeViewNew').on('changed.jstree', function(e, data) {
  var ids = data.inst.get_path('#bdeViewNew' + data.rslt.obj.attr('id'),true);
  var names = data.inst.get_path('#bdeViewNew' + data.rslt.obj.attr('id'),false);
  alert("Path [ID or Name] from root node to selected node = ID's = "+ids+" :: Name's = "+names);
   });
   });
  </code></pre>
  
  <p>but still no result to get_path. Do I need to use different JS or a plugin? And what is the meaning of attr('id') i should pass the id of that li or something else as i did'nt understand this syntax properly.</p>
  
  <p>Adding my jstree: </p>
  
  <pre><code> &lt;div id="bdeViewNew"&gt;
      &lt;ul&gt;
  
  
          &lt;li id="bde" data-jstree='{"opened":true,"icon":"./images/tree.png"}'"&gt;
              Parent 1
  
              &lt;ul&gt;
  
                  &lt;li id="aaa" data-jstree='{"opened":true,"icon":"./images/tree.png"}'&gt;
                      Child 1 &lt;c:forEach items="${empInfo.empList}"
                          var="empValue"&gt;
                          &lt;ul&gt;
                              &lt;li id="bbb" data-jstree='{"icon":"./images/tree.png"}' &gt;${empValue.empName}&lt;/li&gt;
                          &lt;/ul&gt;
                      &lt;/c:forEach&gt;
                  &lt;/li&gt;
              &lt;/ul&gt;
              &lt;ul&gt;
                  &lt;li id="ccc" data-jstree='{"icon":"./images/tree.png"}'&gt;Child 2
                      &lt;c:forEach items="${imgInfo.imgList}"
                          var="imgValue"&gt;
                          &lt;ul&gt;
                              &lt;li id="ddd" data-jstree='{"icon":"./images/tree.png"}'&gt;${imgValue.imgName}&lt;/li&gt;
                          &lt;/ul&gt;
                      &lt;/c:forEach&gt;
                  &lt;/li&gt;
              &lt;/ul&gt;
          &lt;/li&gt;
      &lt;/ul&gt;
  &lt;/div&gt;
  </code></pre>