title: How to convert html tree in to a customized json tree using jquery?
body: <pre><code>&lt;ul id='parent_of_all'&gt;
  &lt;li&gt;
    &lt;span class='operator'&gt;&amp;&amp;&lt;/span&gt;
    &lt;ul&gt;
      &lt;li&gt;
        &lt;span class='operator'&gt;||&lt;/span&gt;
        &lt;ul&gt;
          &lt;li&gt;
            &lt;span class='operator'&gt;&amp;&amp;&lt;/span&gt;
            &lt;ul&gt;
              &lt;li&gt;
              &lt;span class='condition'&gt;1 == 1&lt;/span&gt;
              &lt;/li&gt;
            &lt;/ul&gt;
          &lt;/li&gt;
        &lt;/ul&gt;
      &lt;/li&gt;
    &lt;/ul&gt;
    &lt;ul&gt;
      &lt;li&gt;
        &lt;span class='condition'&gt;1 != 0&lt;/span&gt;
      &lt;/li&gt;
    &lt;/ul&gt;
  &lt;/li&gt;
  &lt;/ul&gt;
  </code></pre>
  
  <p>to</p>
  
  <pre><code>{"&amp;&amp;":[{'||':[ {'&amp;&amp;':[ {"lhs": "1", "comparator": "==", "rhs":"1"} ]} ] } , {"lhs": "1", "comparator": "!=", "rhs":"0"}]}
  </code></pre>
  
  <p>As of now, I know the basics of jQuery, JavaScript. I need to know where to start thinking in order to accomplish the above conversion.</p>
  
  <p>And the html tree could be more complex with more children.</p>