JSON编码HTML列表 - 所有父项都显示所有子项

Question

我有这个有序列表：

function convert( name_ref ) {
    name_ref = name_ref + " > ol > li";
    var mylist = [];
    $(name_ref).each(function () {
		if ($(this).find('> ol > li').length){
			mylist.push({
				"name": $(this).children("span").text(),
				"childs": convert( name_ref )
			});
		} else {
			mylist.push({
				"name": $(this).children("span").text()
			});
		}
    });
    return mylist;
}

function convert_final( the_list ) {
    $("#result").html(JSON.stringify(the_list));
}

convert_final( convert('.ols') );

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="ols">
<ol>
  <li><span>Something</span>
    <ol><li><span>Something 1</span></li></ol>
  </li>
  <li><span>Something 2</span></li>
  <li><span>Something 3</span>
    <ol><li><span>Something 4</span></li></ol>
  </li>
</ol>
</div>
<div id="result"></div>

上面的列表包含子菜单，如带子菜单的菜单。我想通过json编码html列表（将列表转换为json），但json结果是错误的，因为“Something 3”的子项可以在json中找到“Something”的子项，反之亦然。

我能做些什么来向json展示“li”的真正孩子。

希望你理解我的问题， 非常感谢你！

Answer 1

在对convert的递归调用中，name_ref变为：

.ols > ol > li > ol > li

这会将所有 li个孩子嵌套到两层深处。

另一种方法是在jQuery集合本身上调用convert：

function convert(name_ref) {
  var mylist = [];

  $(name_ref).each(function () {
    var li= $(this).find('> ol > li');
    if(li.length) {
      mylist.push({
        'name': $(this).children('span').text(),
        'childs': convert(li)
      });
    }
    else {
      mylist.push({
        'name': $(this).children('span').text()
      });
    }
  });
  return mylist;
}

function convert_final( the_list ) {
  $('#result').html(JSON.stringify(the_list));
}

convert_final(convert($('.ols > ol > li')));

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="ols">
<ol>
  <li><span>Something</span>
    <ol><li><span>Something 1</span></li></ol>
  </li>
  <li><span>Something 2</span></li>
  <li><span>Something 3</span>
    <ol><li><span>Something 4</span></li></ol>
  </li>
</ol>
</div>
<div id="result"></div>

Answer 2

Maybe this can be of use, not tailored to your problem but same principle

http://jsfiddle.net/fkling/X8J7J/