我在此上浪费了很多时间。递归部分非常虚幻。 对于未知深度的给定HTML结构,我需要转换为JSON。 (我从正在构建的某些YAML i18n翻译系统中使用此功能)
我的一般想法是深入了解,直到找到INPUT,然后使用的键/值创建一个对象,然后span.innerHTML/input.value返回该对象,因此它将是最后<span class="title">到达的KEY的值。
INPUT
span.innerHTML/input.value
<span class="title">
(是的,开发有点复杂,但非常有趣)
JSBIN游乐场 -实时代码示例
我无法让递归函数正常工作,无法输出所需的JSON …
<ul> <li> <span class="title">footer</span> <ul> <li> <span>statement</span> <input type="text" value="xxx"> </li> </ul> </li> <li> <span class="title">landing</span> <ul> <li> <span>page_title</span> <input type="text" value="yyy"> </li> <li> <span>page_sub_title</span> <input type="text" value="xxx"> </li> <li> <span class="title">pricing</span> <ul class="level11"> <li> <span>title</span> <input type="text" value="aaa"> </li> <li> <span>cost</span> <input type="text" value="xxx"> </li> </ul> </li> </ul> </li> </ul>
{ footer : { statement : 'xxx' }, landing : { page_title : 'yyy', page_sub_title : 'xxx', pricing : { title : 'aaa', cost : 'xxx' } } }
如果您可以说服自己使用jQuery,请尝试以下操作:
function helper(root) { var result = {}; $('> ul > li > span', root).each(function () { result[$(this).text()] = $(this).hasClass('title') ? helper($(this).parent()) : $(this).next('input').val(); }); return result; } console.log(helper('body'));