JSON编码一个HTML列表——所有子项都显示在所有父项上

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

本文关键字：编码 显示 一个 HTML 列表 JSON      更新时间：2023-09-26

我有这个排序列表：

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中的"Someting"的子级找到，反之亦然。

我该怎么做才能在json中向olny显示"li"的真正子级。

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

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

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

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

相关文章：