title: Generating a nodes path from an unordered list
body: <p>I have the following list of data:</p>
  
  <p><a href="https://i.stack.imgur.com/kxTgS.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/kxTgS.png" alt="enter image description here"></a></p>
  
  <p>Which is set up with this HTML:</p>
  
  <pre><code>&lt;ul id='tree'&gt;
      &lt;li data-id="1" data-parent="0"&gt;
          Home
          &lt;ul&gt;
              &lt;li data-id="2" data-parent="1"&gt;
                  About
                  &lt;ul&gt;
                      &lt;li data-id="4" data-parent="2"&gt;
                          What we do
                      &lt;/li&gt;
                  &lt;/ul&gt;
              &lt;/li&gt;
  
              &lt;li data-id="3" data-parent="1"&gt;
                  Contact
                  &lt;ul&gt;
                      &lt;li data-id="5" data-parent="3"&gt;
                          Employees
                          &lt;ul&gt;
                              &lt;li data-id="6" data-parent="5"&gt;
                                  Full-time
                              &lt;/li&gt;
  
                              &lt;li data-id="7" data-parent="5"&gt;
                                  Part-time
                              &lt;/li&gt;
                          &lt;/ul&gt;
                      &lt;/li&gt;
                  &lt;/ul&gt;
              &lt;/li&gt;
          &lt;/ul&gt;
      &lt;/li&gt;
  &lt;/ul&gt;
  </code></pre>
  
  <p>Upon clicking a button, I want to generate the node path for each list item and add it to a string of data I can format.</p>
  
  <p>I have started with this:</p>
  
  <pre><code>$('button').on('click', function(){ 
  
      var output = "";
  
      $("ul#tree li").each(function(){
           var id = $(this).data("id");
           var parent = $(this).data("parent");
           output = output + "id=" + id + "&amp;parent=" + parent + "$"; 
      });
  
      $("section").html(output);
  
  });
  </code></pre>
  
  <p>Which generates:</p>
  
  <pre><code>id=1&amp;parent=0
  id=2&amp;parent=1
  id=4&amp;parent=2
  id=3&amp;parent=1
  id=5&amp;parent=3
  id=6&amp;parent=5
  id=7&amp;parent=5
  </code></pre>
  
  <p>However, I want to add the node path of each line (the path of parent ID's to the current list item). So, for example, it would look like this:</p>
  
  <pre><code>id=1&amp;parent=0&amp;node_path=.0.
  id=2&amp;parent=1&amp;node_path=.0.1.
  id=4&amp;parent=2&amp;node_path=.0.1.2.
  id=3&amp;parent=1&amp;node_path=.0.1.
  id=5&amp;parent=3&amp;node_path=.0.1.3.
  id=6&amp;parent=5&amp;node_path=.0.1.3.5.
  id=7&amp;parent=5&amp;node_path=.0.1.3.5.
  </code></pre>
  
  <p>I'm not sure how to create a function that would combine parent ID's in the path of ul > li's...</p>