转换嵌套UL李以JSON
UL李结构转换嵌套UL李以JSON
<ul id="sortable" class="sortable ui-sortable">
<li id="home" class="col-sm-12 col-lg-12 "><div>home <span data-name="home" class="delete">remove</span></div>
<ul>
<li id="about-us" class="col-sm-12 col-lg-12" style="position: relative; left: 0px; top: 0px;"><div>about-us <span data-name="about-us" class="delete">remove</span></div>
<ul>
<li id="product" class="col-sm-12 col-lg-12" style="position: relative; left: 0px; top: 0px;"><div>product <span data-name="product" class="delete">remove</span></div> </li>
</ul>
</li>
</ul>
</li>
<li id="carrer" class="col-sm-12 col-lg-12 "><div>carrer <span data-name="carrer" class="delete">remove</span></div>
<ul>
<li id="product" class="col-sm-12 col-lg-12" style="position: relative; left: 0px; top: 0px;"><div>product <span data-name="product" class="delete">remove</span></div></li>
<li id="about-us" class="col-sm-12 col-lg-12" style="position: relative; left: 0px; top: 0px;"><div>about-us <span data-name="about-us" class="delete">remove</span></div>
<ul>
<li id="home" class="col-sm-12 col-lg-12" style="position: relative; left: 0px; top: 0px;"><div>home <span data-name="home" class="delete">remove</span></div></li>
</ul>
</li>
<li id="product" class="col-sm-12 col-lg-12" style="position: relative; left: 0px; top: 0px;"><div>product <span data-name="product" class="delete">remove</span></div> </li>
</ul>
</li>
<li id="carrer" class="col-sm-12 col-lg-12 "><div>carrer <span data-name="carrer" class="delete">remove</span></div></li>
<li id="about-us" class="col-sm-12 col-lg-12 "><div>about-us <span data-name="about-us" class="delete">remove</span></div>
<ul>
<li id="product" class="col-sm-12 col-lg-12" style="position: relative; left: 0px; top: 0px;"><div>product <span data-name="product" class="delete">remove</span></div> </li>
</ul>
</li>
我想要的Json像
{ “名”: “主屏幕上删除”, “孩子”: { “name”:“about-us remove”, “children”:[{“name”:“product remove”, “children”:[{}], }] }], “名称”: “CARRER删除”, “孩子”:[{ “名称”: “产物中除去”, “孩子”:[{}], “名称”:“关于美中删除 “ ”孩子“:[{ ”名“: ”主屏幕上删除“, ”孩子“:[{}], }], ”名“: ”产品删除“, ” 孩子“:[{}], }], ”name“:”carrer remove“, ”children“:[{}], ”name“:”about-us remove“, ”children“ “名称”:“产品删除”, “孩子”:[{}], }] }
我已经做了代码如下
function buildJSON($li) {
var subObj = { "name": $li.contents().eq(0).text().trim() };
$li.children('ul').children().each(function() {
if (!subObj.children) { subObj.children = []; }
subObj.children.push(buildJSON($(this)));
});
return subObj;
}
var obj = buildJSON($("#sortable").children());
$('#sortable').append('<pre>').find('pre').append(JSON.stringify(obj, null, 2));
出把它的不同的东西
{ “名” :“家庭删除”, “children”:[ { “name”:“about-us remove”, “children”:[ { “名”: “产品删除” } ] }, { “名”: “产品删除” }, { “名”: “对,我们删除”, “孩子” :[ { “名”: “主屏幕上删除” } ] }, { “名”: “产品删除” }, { “名”: “产品删除” } ] }
一些项丢失...... 请帮我在哪里,我提前
错过代码
感谢您进行遍历父ul
的每个孩子失踪后,每个li
。
而且它不会返回单个对象。您将以json数组格式获取数据。
这是完整的JS代码。
function FetchChild(){
var data =[];
$('#sortable > li').each(function(){
data.push(buildJSON($(this)));
});
return data;
}
function buildJSON($li) {
var subObj = { "name": $li.contents().eq(0).text().trim() };
$li.children('ul').children().each(function() {
if (!subObj.children) {
subObj.children = [];
}
subObj.children.push(buildJSON($(this)));
});
return subObj;
}
var obj = FetchChild();
$('#sortable').append('<pre>').find('pre').append(JSON.stringify(obj, null, 2));
Amit kumar,Nenad Vracar谢谢...它适用于我,你救了我的夜晚 –
你输出的数据结构并不好,这就是你会得到https://jsfiddle.net/Lg0wyt9u/1777/ –
@NenadVracar我已经更新我的结构,请检查一次 –