javascript - 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”的子项可以在“Something”的子项的 json 中找到，反之亦然。

我该怎么做才能向 olny 显示 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>