找到每个元素的所有父对象 [英] Find all the parents of each element
问题描述
我试图在不使用url(路由提供程序)且不使用jQuery的情况下创建面包屑.我有一棵这样的树
人类树木动物猫雄狮小狗梗犬斗牛犬可卡汽车 ，当我单击Cocker以显示
时，我想动物/狗/可卡犬
因此，我创建了一个递归函数，以便为我单击的每个元素找到父级/父级，但是它无法正常工作.它发现一个元素有一个父级，它也找到一个元素的第一个父级，但是没有显示第二个父级.例如代替
动物/狗/可卡犬
它显示
狗/可卡犬
那是我的职责
var count = 0;函数iterate(obj){for(obj中的var键){var elem = obj [key];if(key ==="children"){数++;}if(typeof elem ==="object"){if(elem.children ===未定义){elem.children = 1;}if(elem.children.length！== 1){迭代(elem);$ scope.showTrail = elem.children;$ scope.elem =元素;}}}if($ scope.elem ===未定义){$ scope.elem = {};$ scope.elem.children = {};$ scope.elem.roleName = {};}对于(var i = 0; i< $ scope.elem.children.length; i ++){if($ scope.elem.children [i] .roleName === selNode.roleName){console.log($ scope.elem.roleName +是" + selNode.roleName)的父级；}}}iterate($ scope.treeData); 这就是JSON
[{"roleName":人类"，"roleId":"role2"，"children":[{"roleName":"，"roleId":"role11"，"children":[]}]}，{"roleName":"Trees"，"roleId":"role2"，"children":[{"roleName":"，"roleId":"role11"，"children":[]}]}，{"roleName":动物"，"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":人类"，"roleId":"role2"，"children":[]}，{"roleName":树木"，"roleId":"role2"，"children":[]}，{"roleName":动物"，"roleId":"role2"，"children":[{"roleName":猫"，"roleId":"role11"，"children":[]}，{"roleName":狮子"，"roleId":"role11"，"children":[]}，{"roleName":"Dogs"，"roleId":"role11"，"children":[{"roleName":"Terrier"，"roleId":"role11"，"children":[]}，{"roleName":"Bulldog"，"roleId":"role11"，"children":[]}，{"roleName":可卡犬"，"roleId":"role11"，"children":[]}，]}]}，{"roleName":汽车"，"roleId":"role2"，"children":[]}];var index = {};函数buildIndex(root，children){for(var i in children){index [children [i] .roleName] =根；buildIndex(children [i] .roleName，children [i] .children);}}buildIndex("Root"，tree);函数getPath(leaf){返回索引[叶]?getPath(index [leaf]).concat([leaf]):[叶子];}getPath("Bulldog");//返回["Root"，"Animals"，"Dogs"，"Bulldog"] JSFiddle: http://jsfiddle.net/E49Ey/
但是，它与Angular无关，除了数据位于范围内.如果您有一个根据此数据构建的DOM树，则可以通过上树从DOM获得面包屑.
I'm trying to create a breadcrumb without using the url (the route provider) and without using jQuery. I have a tree like that
Humans
Trees
Animals
Cats
Lions
Dogs
Terrier
Bulldog
Cocker
Cars
and I'd like when I click on Cocker to display
Animals / Dogs / Cocker
So, I created a recursive function in order to find parent/parents for each element that I click on but it doesn't work correctly. It finds that an element has a parent, it also finds the first parent of an element but it doesn't show the second parent. For instance instead of
Animals / Dogs / Cocker
it shows
Dogs / Cocker
That's my function
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);
and that's the 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" : [] }
]}
]
Any help please, any idea. Thank you very much.
You are iterating over the tree, but it won't help if you don't keep some information. The simplest solution to your problem is to build an index of all nodes that points to their parents.
This code will work if roleName has unique values across the whole tree:
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/
However it has nothing to do with Angular, except the data resides in the scope. If you have a DOM tree built from this data, then you could get the breadcrumb right from the DOM by going up the tree.
这篇关于找到每个元素的所有父对象的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
