JSON 编码一个 HTML 列表 - 所有孩子都显示 parents

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 结果是错误的，因为 child 的 "Something 3" 可以在 "Something" 和 vice-versa 的 child 的 json 中找到。

我该怎么做才能向 olny 展示 json 中 "li" 的真实 child。

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

Answer 1

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

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

Answer 2

在对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>

JSON 编码一个 HTML 列表 - 所有孩子都显示 parents

JSON encode a HTML list - all childs are showed at all parents

html

javascript

jquery

json