javascript – 查找每个元素的所有父元素
作者:互联网
我正在尝试在不使用url(路由提供程序)的情况下创建面包屑,而不使用jQuery.
我有一棵树
Humans
Trees
Animals
Cats
Lions
Dogs
Terrier
Bulldog
Cocker
Cars
当我点击Cocker进行显示时,我想要
Animals / Dogs / Cocker
所以,我创建了一个递归函数,以便为我点击的每个元素找到父/父,但它无法正常工作.它发现一个元素有一个父元素,它也找到了元素的第一个父元素,但它没有显示第二个父元素.例如,而不是
Animals / Dogs / Cocker
表明
Dogs / Cocker
那是我的功能
var count = 0;
function iterate(obj) {
for(var key in obj) {
var elem = obj[key];
if(key === "children") {
count++;
}
if(typeof elem === "object") {
if(elem.children === undefined){
elem.children = 1;
}
if(elem.children.length !==1){
iterate(elem);
$scope.showTrail = elem.children;
$scope.elem = elem;
}
}
}
if($scope.elem === undefined){
$scope.elem = {};
$scope.elem.children = {};
$scope.elem.roleName = {};
}
for (var i = 0; i<$scope.elem.children.length; i++) {
if($scope.elem.children[i].roleName === selNode.roleName) {
console.log($scope.elem.roleName + " is a parent of " + selNode.roleName);
}
}
}
iterate($scope.treeData);
这就是JSON
[
{ "roleName" : "Humans", "roleId" : "role2", "children" : [
{ "roleName" : "", "roleId" : "role11", "children" : [] }
]},
{ "roleName" : "Trees", "roleId" : "role2", "children" : [
{ "roleName" : "", "roleId" : "role11", "children" : [] }
]},
{ "roleName" : "Animals", "roleId" : "role2", "children" : [
{ "roleName" : "Cats", "roleId" : "role11", "children" : [
{ "roleName" : "", "roleId" : "role11", "children" : [] }
]},
{ "roleName" : "Lions", "roleId" : "role11", "children" : [
{ "roleName" : "", "roleId" : "role11", "children" : [] }
]},
{ "roleName" : "Dogs", "roleId" : "role11", "children" : [
{ "roleName" : "Terrier", "roleId" : "role11", "children" : [
{ "roleName" : "", "roleId" : "role11", "children" : [] }
]},
{ "roleName" : "Bulldog", "roleId" : "role11", "children" : [
{ "roleName" : "", "roleId" : "role11", "children" : [] }
]},
{ "roleName" : "Cocker", "roleId" : "role11", "children" : [
{ "roleName" : "", "roleId" : "role11", "children" : [] }
]},
]}
]},
{ "roleName" : "Cars", "roleId" : "role2", "children" : [
{ "roleName" : "", "roleId" : "role11", "children" : [] }
]}
]
请任何帮助,任何想法.非常感谢你.
解决方法:
您正在迭代树,但如果您不保留某些信息,它将无济于事.解决您问题的最简单方法是构建指向其父节点的所有节点的索引.
如果roleName在整个树中具有唯一值,则此代码将起作用:
var tree = [
{ "roleName" : "Humans", "roleId" : "role2", "children" : []},
{ "roleName" : "Trees", "roleId" : "role2", "children" : []},
{ "roleName" : "Animals", "roleId" : "role2", "children" : [
{ "roleName" : "Cats", "roleId" : "role11", "children" : []},
{ "roleName" : "Lions", "roleId" : "role11", "children" : []},
{ "roleName" : "Dogs", "roleId" : "role11", "children" : [
{ "roleName" : "Terrier", "roleId" : "role11", "children" : []},
{ "roleName" : "Bulldog", "roleId" : "role11", "children" : []},
{ "roleName" : "Cocker", "roleId" : "role11", "children" : []},
]}
]},
{ "roleName" : "Cars", "roleId" : "role2", "children" : []}
];
var index = {};
function buildIndex(root, children) {
for(var i in children) {
index[children[i].roleName] = root;
buildIndex(children[i].roleName, children[i].children);
}
}
buildIndex("Root", tree);
function getPath(leaf) {
return index[leaf] ? getPath(index[leaf]).concat([leaf]) : [leaf];
}
getPath("Bulldog");// returns ["Root", "Animals", "Dogs", "Bulldog"]
JSFiddle:http://jsfiddle.net/E49Ey/
但是它与Angular无关,除了数据驻留在范围内.如果你有一个根据这个数据构建的DOM树,那么你可以通过上升树从DOM获得面包屑.
标签:breadcrumbs,javascript,angularjs 来源: https://codeday.me/bug/20190831/1774887.html