title: jQuery tree traversal - Nested Unordered list elements to JSON
body: <p>Okay, Now I have an unordered list here:</p>
  <pre><code>&lt;ul id=&quot;mycustomid&quot;&gt;
      &lt;li&gt;&lt;a href=&quot;url of Item A&quot; title=&quot;sometitle&quot;&gt;Item A&lt;/a&gt;
          &lt;ul class=&quot;children&quot;&gt;
             &lt;li&gt;&lt;a href=&quot;url of Child1 of A&quot; title=&quot;sometitle&quot;&gt;Child1 of A&lt;/a&gt;
                 &lt;ul class=&quot;children&quot;&gt;
                   &lt;li&gt;&lt;a href=&quot;url of Grandchild of A&quot; title=&quot;sometitle&quot;&gt;Grandchild of A&lt;/a&gt;
                      &lt;ul class=&quot;children&quot;&gt;
                         &lt;li&gt;&lt;a href=&quot;url of Grand Grand child of A&quot; title=&quot;sometitle&quot;&gt;Grand Grand child of A&lt;/a&gt;&lt;/li&gt;
                      &lt;/ul&gt;
                  &lt;/li&gt;
                 &lt;/ul&gt;
             &lt;/li&gt;
          &lt;/ul&gt;
      &lt;/li&gt;
      &lt;li&gt;&lt;a href=&quot;url of Item B&quot; title=&quot;sometitle&quot;&gt;Item B&lt;/a&gt;&lt;/li&gt;
      &lt;li&gt;&lt;a href=&quot;url of Item C&quot; title=&quot;sometitle&quot;&gt;Item C&lt;/a&gt;&lt;/li&gt;
  &lt;/ul&gt;
  </code></pre>
  <p>Basically, I want to just convert this data into a JSON entity. I want to get this done in <strong>jQuery</strong> and I think I'm having a really tough time doing it. The above list is just an example and in reality, my list would ideally have more number of children and probably be 'n' levels deep (Meaning, it will have grandchildren of grandchildren of grandchildren...or more) I've lost countless hours of sleep on this and I don't think I'm going anywhere :(</p>
  <p>I want to extract these things: The text inside the anchor, the url of the anchor and the title of the anchor and put them onto a JSON entity</p>
  <p><strong>The JSON format for my list above is something like this:</strong></p>
  <pre><code>{
          name: &quot;Item A&quot;,
          url: &quot;url of Item A&quot;,
          title: &quot;sometitle&quot;,
          children: [{
                     name: &quot;Child1 of A&quot;,
                     url: &quot;url of Child1 of A&quot;,
                     title: &quot;sometitle&quot;,
                     children: [{
                                  name: &quot;Grandchild of A&quot;,
                                  url: &quot;url of Grandchild of A&quot;,
                                  title: &quot;sometitle&quot;,
                                  children: [{
                                             name: &quot;Grand Grand child of A&quot;,
                                             url: &quot;url of Grand Grand child of A&quot;,
                                             title: &quot;sometitle&quot;,
                                             children: []
                                             }]
                                }]
                     }]
  },
             {
              name: &quot;Item B&quot;,
              url: &quot;url of Item B&quot;,
              title: &quot;sometitle&quot;,
              children: []
             },
             {
              name: &quot;Item C&quot;,
              url: &quot;url of Item C&quot;,
              title: &quot;sometitle&quot;,
              children: []
             }
  </code></pre>
  <p>Some useful references:</p>
  <p><strong>Javascript solution:</strong>
  <a href="https://stackoverflow.com/questions/3158265/traversing-unordered-lists-using-javascript-jquery">Traversing unordered lists using Javascript/Jquery</a></p>
  <p>^ This one probably works, but the format of the JSON output I need is as shown above and not what this script outputs :(</p>
  <p><strong>Other references:</strong></p>
  <p><a href="https://stackoverflow.com/questions/2793688/how-do-i-put-unordered-list-items-into-an-array">How do I put unordered list items into an array</a></p>
  <p><a href="https://jsfiddle.net/yS6ZJ/1/" rel="nofollow noreferrer">https://jsfiddle.net/yS6ZJ/1/</a></p>
  <p><a href="https://jsfiddle.net/CLLts/" rel="nofollow noreferrer">https://jsfiddle.net/CLLts/</a></p>
  <p><a href="https://jsfiddle.net/cWnwt/" rel="nofollow noreferrer">https://jsfiddle.net/cWnwt/</a></p>
  <p>Someone please help :(<br />
  Been breaking my head for many many sleepless nights..(P.s - It took me about 40+ mins to write this entire page along with the code)</p>