Javascript 所有元素作为子元素选择选项

小提琴：

如何将元素的所有子元素显示为选择选项？（选择选项的目标是选择单个对象，但也要选择没有任何重复项的阵列）

下面是一个例子，列表应该显示如下内容

svg>defs
svg>g
svg>g>rect
svg>g>g
svg>g>g:n子级（0）
svg>g>g:n子级（1）
svg>g>g:n子级（2）
svg>g>g:n个子（0）>椭圆
svg>g>g>g
svg>g>g>g:n子级（2）
svg>g>g:n子级（0）>g
svg>g>g:n个子（0）>g>circle
svg>g>g:n个子（0）>g>circle>path:n个子（0）
svg>g>g:n子级（0）>路径

$（“.vector svg”）。每个（函数（）{
$.each（这是子函数，函数（i）{
$（“#getItems”）.append（“svg>”+this.tagName+”）；
$（“#getItems”）.append（“svg>”+this.tagName+”：第n个子（“+i+”）+”）；
var str=this.tagName；
$（“#getItems”）.append（“svg>”+str+“>”+this.tagName+”）；
//有孩子
如果（这是儿童）{
$.each（这是子函数，函数（i）{
$（“#getItems”）.append（“svg>”+str+“>”+this.tagName+”：第n个子（“+i+”）+”）；
});
var str=this.tagName；
$（“#getItems”）.append（“svg>”+str+“>”+this.tagName+”）；
//还有更多的孩子吗？
如果（这是儿童）{
$.each（这是子函数，函数（i）{
$（“#getItems”）.append（“svg>”+str+“>”+this.tagName+”：第n个子（“+i+”）+”）；
});
}
}
});
});
我用递归函数解决了您的问题，我将在fiddle和这里分享它。
（
console.log（myMap）；
用于测试）


var generateChildrenMap=函数（元素）{
var childrenNames=Array（）；
takeChildren（childrenNames、element、element.prop（“标记名”）；
返回儿童姓名；
};
var takeChildren=函数（childrenNames、元素、路径）{
var children=element.children（）；
var tempPath；
对于（var i=0；i0）{
takeChildren（childrenNames，$（child），tempPath）；
}
}
}
var generateSelectWithMap=函数（元素，映射）{
html（“”）；
对于（var i=0；i而言，实现这一点的一种方法是：

使用
*
使用
.parentsUntil（）
检查每个家长是否有兄弟姐妹。

如果存在同级，则将
：n-child（）
添加到标记
否则只需添加标签

请参见此示例：


jQuery（“svg”）.find（“*”）.each（function（）{
设项=[]；
_this=jQuery（this）；
_this.parentsUntil（'.vector'）.addBack（）.each（函数（i，e）{
常数el=jQuery（e）；
常量propName=el.prop（“标记名”）；
常量兄弟姐妹=el.兄弟姐妹（propName）；
如果（长度>0）{
常数索引=el.index（）；
push（propName+`:n个子项（${index}）`）；
}否则{
item.push（propName）；
}
});
让选择器=item.join（“>”）；
$（“#getItems”）.append（“+selector+”）；
})；

你的代码有哪些地方没有达到你想要的效果？可能∂重复使用此选项会产生重复的选择器，例如第三个，填充设置为
“rgb（246168117）”
无法从脚本结果中选择。我想我会使用通用选择器。从不知道“.parentsUntil（）”。谢谢！
var generateChildrenMap=function(element){
    var childrenNames=Array();
    takeChildren(childrenNames,element,element.prop('tagName'));
    return childrenNames;
};
var takeChildren=function(childrenNames,element,path){
    var children=element.children();
    var tempPath;
    for(var i=0;i<children.length;i++){
        var child=children[i];
        tempPath=path+'>'+child.tagName;
        childrenNames.push(tempPath);
        if($(child).children().length>0){
            takeChildren(childrenNames,$(child),tempPath);
        }
    }
}
var generateSelectWithMap=function(element,map){
    element.html('');
    for(var i=0;i<map.length;i++){
        var option=$('<option>',{
            'text':map[i],
            'data-id':i
        });
        element.append(option);
    }
}
var myMap=generateChildrenMap($(".vector svg"));
generateSelectWithMap($("#getItems"),myMap);
console.log(myMap);