title: Convert nested ul li to json
body: <p>ul li structure</p>
  
  <pre><code>&lt;ul id="sortable" class="sortable ui-sortable"&gt;
  &lt;li id="home" class="col-sm-12 col-lg-12 "&gt;&lt;div&gt;home &lt;span data-name="home" class="delete"&gt;remove&lt;/span&gt;&lt;/div&gt;
      &lt;ul&gt;
              &lt;li id="about-us" class="col-sm-12 col-lg-12" style="position: relative; left: 0px; top: 0px;"&gt;&lt;div&gt;about-us &lt;span data-name="about-us" class="delete"&gt;remove&lt;/span&gt;&lt;/div&gt;
                  &lt;ul&gt;
                      &lt;li id="product" class="col-sm-12 col-lg-12" style="position: relative; left: 0px; top: 0px;"&gt;&lt;div&gt;product &lt;span data-name="product" class="delete"&gt;remove&lt;/span&gt;&lt;/div&gt; &lt;/li&gt;
                  &lt;/ul&gt;
              &lt;/li&gt;
      &lt;/ul&gt;
  &lt;/li&gt;
  &lt;li id="carrer" class="col-sm-12 col-lg-12 "&gt;&lt;div&gt;carrer &lt;span data-name="carrer" class="delete"&gt;remove&lt;/span&gt;&lt;/div&gt;
      &lt;ul&gt;
          &lt;li id="product" class="col-sm-12 col-lg-12" style="position: relative; left: 0px; top: 0px;"&gt;&lt;div&gt;product &lt;span data-name="product" class="delete"&gt;remove&lt;/span&gt;&lt;/div&gt;&lt;/li&gt;
          &lt;li id="about-us" class="col-sm-12 col-lg-12" style="position: relative; left: 0px; top: 0px;"&gt;&lt;div&gt;about-us &lt;span data-name="about-us" class="delete"&gt;remove&lt;/span&gt;&lt;/div&gt;
              &lt;ul&gt;
                  &lt;li id="home" class="col-sm-12 col-lg-12" style="position: relative; left: 0px; top: 0px;"&gt;&lt;div&gt;home &lt;span data-name="home" class="delete"&gt;remove&lt;/span&gt;&lt;/div&gt;&lt;/li&gt;
              &lt;/ul&gt;
          &lt;/li&gt;
          &lt;li id="product" class="col-sm-12 col-lg-12" style="position: relative; left: 0px; top: 0px;"&gt;&lt;div&gt;product &lt;span data-name="product" class="delete"&gt;remove&lt;/span&gt;&lt;/div&gt;         &lt;/li&gt;
      &lt;/ul&gt;
  &lt;/li&gt;
      &lt;li id="carrer" class="col-sm-12 col-lg-12 "&gt;&lt;div&gt;carrer &lt;span data-name="carrer" class="delete"&gt;remove&lt;/span&gt;&lt;/div&gt;&lt;/li&gt;
      &lt;li id="about-us" class="col-sm-12 col-lg-12 "&gt;&lt;div&gt;about-us &lt;span data-name="about-us" class="delete"&gt;remove&lt;/span&gt;&lt;/div&gt;
          &lt;ul&gt;
              &lt;li id="product" class="col-sm-12 col-lg-12" style="position: relative; left: 0px; top: 0px;"&gt;&lt;div&gt;product &lt;span data-name="product" class="delete"&gt;remove&lt;/span&gt;&lt;/div&gt; &lt;/li&gt;
          &lt;/ul&gt;
      &lt;/li&gt;
  </code></pre>
  
  <p></p>
  
  <p>I want Json like</p>
  
  <blockquote>
    <p>{
      "name": "home remove",
      "children": [{
              "name": "about-us remove",
                 "children": [{
                         "name": "product remove",
                 "children": [{}],
                }]
      }],
      "name": "carrer remove",
      "children": [{
                "name": "product remove",
                "children": [{}],
             "name": "about-us remove",
                 "children": [{
                                     "name": "home remove",
                       "children": [{}],
                     }],
        "name": "product remove",
        "children": [{}],
      }],
      "name": "carrer remove",
      "children": [{}],
      "name": "about-us remove",
      "children": [{
        "name": "product remove",
        "children": [{}],
      }]
    }</p>
  </blockquote>
  
  <p>I have did code as below</p>
  
  <pre><code>function buildJSON($li) {
     var subObj = { "name": $li.contents().eq(0).text().trim() };
     $li.children('ul').children().each(function() {
       if (!subObj.children) { subObj.children = []; }
       subObj.children.push(buildJSON($(this)));
     });
     return subObj;
   }
  
   var obj = buildJSON($("#sortable").children());
   $('#sortable').append('&lt;pre&gt;').find('pre').append(JSON.stringify(obj, null, 2));
  </code></pre>
  
  <p>Out put its something different</p>
  
  <blockquote>
    <p>{
      "name": "home remove",
      "children": [
        {
          "name": "about-us remove",
          "children": [
            {
              "name": "product remove"
            }
          ]
        },
        {
          "name": "product remove"
        },
        {
          "name": "about-us remove",
          "children": [
            {
              "name": "home remove"
            }
          ]
        },
        {
          "name": "product remove"
        },
        {
          "name": "product remove"
        }
      ]
    }</p>
  </blockquote>
  
  <p>Some entries are missing...
  please help me where i missed code</p>
  
  <p>thanks in advance</p>