javascript – 如何使用jquery将html树转换为自定义的json树？

<ul id='parent_of_all'>
<li>
  <span class='operator'>&&</span>
  <ul>
    <li>
      <span class='operator'>||</span>
      <ul>
        <li>
          <span class='operator'>&&</span>
          <ul>
            <li>
            <span class='condition'>1 == 1</span>
            </li>
          </ul>
        </li>
      </ul>
    </li>
  </ul>
  <ul>
    <li>
      <span class='condition'>1 != 0</span>
    </li>
  </ul>
</li>
</ul>

至

{"&&":[{'||':[ {'&&':[ {"lhs": "1", "comparator": "==", "rhs":"1"} ]} ] } , {"lhs": "1", "comparator": "!=", "rhs":"0"}]}

截至目前,我了解jQuery,JavaScript的基础知识.我需要知道从哪里开始思考才能完成上述转换.

对于更多的孩子来说,html树可能会更复杂.

解决方法:

您可以使用每个和地图执行此操作

var obj = {}
var span = $('li > span').not('ul li span').text();

$('ul li span').each(function() {
 var text = $(this).text().split(' ');
 obj[span] = (obj[span]||[]).concat({lhs: text[0], comparator: text[1], rhs: text[2]});
});

console.log(obj)

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<li>
  <span>&&</span>
  <ul>
    <li>
      <span>1 == 1</span>
    </li>
  </ul>
  <ul>
    <li>
      <span>1 != 0</span>
    </li>
  </ul>
</li>