Javascript Json：如果类别id与父类别号匹配，则将类别置于第二个父类别下

我想将子类别放在父类别下，如果父类别id与父类别匹配，我想显示在父类别下。如果您在下面查看，您将看到类别id#1是父类别，子类别的值为“parent:1”。我希望这是有意义的，如果你需要我让我知道

jquery代码：

// get categories lists
function listCategories(data) {
  "use strict";
  var output = '<ul data-role="listview"  data-inset="true" >';
  $.each(data.categories, function(key, val) {
    if (val.id == val.parent) {

        output += '<li><a href="#'+ val.slug + '">' + val.title + '+</a></li>';
    }else if (val.id !== val.parent) {

  output += '<li><a href="#'+ val.slug + '">' + val.title + '-</a></li>';
    }

  }); //go through each list item
  output += '</ul>';
  $('#postlist').html(output);

}

---

一个简单的方法是在将

li

元素添加到dom之后对它们重新排序

//获取类别列表
函数列表类别（数据）{
“严格使用”；
变量输出='
；
$.each（数据、类别、功能（键、值）{
输出+='
；
})；//浏览每个列表项
输出+='
'；
var$ul=$（输出）；
$ul.children（）{
var parent=$（this.data（'parent'）；
var$li=$ul.find（'li[data id=“”+parent+“]”）；
如果（$li.长度）{
var$cul=$li.find（'ul'）；
如果（！$cul.length）{
$cul=$（'
'）。附录（$li）；
}
$cul.append（本）
}
});
$ul.find（'li:has（ul）>a'）.contents（）.unwrap（）；
$（'#postlist'）.html（$ul）；
}
风险值数据={
“状态”：“确定”，
“计数”：7，
“类别”：[{
“id”：4，
“slug”：“所有符合条件的退休计划”，
“标题”：“所有合格退休计划”，
“说明”：“，
“家长”：1，
“后计数”：4
}, {
“id”：5，
“slug”：“固定收益db计划”，
“标题”：“固定收益（DB）计划”，
“说明”：“，
“家长”：1，
“post_count”：2
}, {
“id”：6，
“slug”：“固定缴款和混合计划”，
“标题”：“固定缴款和混合计划”，
“说明”：“，
“家长”：1，
“后计数”：6
}, {
“id”：7，
“slug”：“fica ss医疗保险税”，
“标题”：“FICA-党卫军和医疗保险税”，
“说明”：“，
“父项”：0，
“后计数”：4
}, {
“id”：2，
“slug”：“医疗保健计划”，
“标题”：“医疗保健计划”，
“说明”：“，
“父项”：0，
“后计数”：5
}, {
“id”：3，
“slug”：“其他好处”，
“职务”：“其他福利”，
“说明”：“，
“父项”：0，
“后计数”：3
}, {
“id”：1，
“slug”：“退休计划”，
“标题”：“退休计划”，
“说明”：“，
“父项”：0，
“后计数”：13
}]
};
列表类别（数据）

---

我能想到的最干净的方法是（）：

首先映射父子关系。然后以递归方式打印要显示的树。这甚至可以在树中启用更多级别。它不会添加超过需要的DOM操作

function listCategories(data) {
  "use strict";
  var output = '<ul data-role="listview"  data-inset="true" >';
  var children = {};
  var dataById = {};

  // Map parent-children relations
  $.each(data.categories, function(key, val) {
    (children[val.parent] = children[val.parent] || []).push(val.id);
    dataById[val.id] = val;
  });

  // Work recursive through the tree 
  var printRecursive = function(id) {
    var subs = "";
    $.each(children[id] || [], function(key, val) {
      subs += printRecursive(val);
    });
    if (dataById[id]) {
      var hasChildren = subs != "";
      var result = "<li>"
      if(hasChildren) {
        result += dataById[id].title;
        result += "<ul>" + subs + "</ul>";
      } else {
        result += '<a href="#' + dataById[id].slug + '">' + dataById[id].title + '</a>';
      }
      result += "</li>";
      return result;
    }

    return subs;
  };
  // Print tree with root 'id=0'
  $('#postlist').html('<ul data-role="listview"  data-inset="true" >' + printRecursive(0, 0) + '</ul');
}

函数列表类别（数据）{
“严格使用”；
变量输出='
；
var children={}；
var-dataById={}；
//映射父子关系
$.each（数据、类别、功能（键、值）{
（children[val.parent]=children[val.parent]| |[]）.push（val.id）；
dataById[val.id]=val；
});
//在树中递归工作
var printRecursive=函数（id）{
var subs=“”；
$.each（子项[id]| |[]，函数（键，val）{
subs+=printRecursive（val）；
});
如果（数据id[id]）{
var haschilds=subs！=“”；
var result=“
”
如果（有孩子）{
结果+=dataById[id]。标题；
结果+=“
”+subs+“
”；
}否则{
结果+=''；
}
结果+=“
”；
返回结果；
}
返回潜艇；
};
//打印根为“id=0”的树
$（'#postlist'）.html（'
'+printRecursive（0,0）+'ReferenceError:找不到变量：getthis works，但有没有办法禁用它是否有子类别？如果它有子类别，则禁用父级This works，但如果它有子类别，则需要禁用标记categories@velvetInk禁用是什么意思？@velvetInk是否不希望在子类别中包含锚元素？如果父级具有子类别，则禁用该父级
function listCategories(data) {
  "use strict";
  var output = '<ul data-role="listview"  data-inset="true" >';
  var children = {};
  var dataById = {};

  // Map parent-children relations
  $.each(data.categories, function(key, val) {
    (children[val.parent] = children[val.parent] || []).push(val.id);
    dataById[val.id] = val;
  });

  // Work recursive through the tree 
  var printRecursive = function(id) {
    var subs = "";
    $.each(children[id] || [], function(key, val) {
      subs += printRecursive(val);
    });
    if (dataById[id]) {
      var hasChildren = subs != "";
      var result = "<li>"
      if(hasChildren) {
        result += dataById[id].title;
        result += "<ul>" + subs + "</ul>";
      } else {
        result += '<a href="#' + dataById[id].slug + '">' + dataById[id].title + '</a>';
      }
      result += "</li>";
      return result;
    }

    return subs;
  };
  // Print tree with root 'id=0'
  $('#postlist').html('<ul data-role="listview"  data-inset="true" >' + printRecursive(0, 0) + '</ul');
}