javascript - 所有子元素均作为选择选项(All elements children as select options)

Question

(The bounty expires in 6 days) .

((赏金将 在6天后失效)

。) Answers to this question are eligible for a +50 reputation bounty.

(这个问题的答案有资格获得+50声望奖励。)

Michael Schwartz wants to (draw more attention) to this question.

(迈克尔·史瓦兹（Michael Schwartz）希望(引起更多)

关于这个问题的

(注意)

。)

fiddle: https://jsfiddle.net/7qr0pLxj/

(小提琴： https : //jsfiddle.net/7qr0pLxj/)

How can I show all of an element's children as select options?

(如何显示元素的所有子元素作为选择选项？)

(select options goal is to select a single object but also an array without any duplicates)

(（选择选项的目标是选择一个对象，但还要选择一个没有重复的数组）)

Here's an example, the list should show something like this.....

(这是一个示例，列表应显示如下内容：.....)

svg > defs

(svg> defs)

svg > g

(svg> g)

svg > g > rect

(svg> g>矩形)

svg > g > g

(svg> g> g)

svg > g > g:nth-child(0)

(svg> g> g：nth-??child（0）)

svg > g > g:nth-child(1)

(svg> g> g：nth-??child（1）)

svg > g > g:nth-child(2)

(svg> g> g：nth-??child（2）)

svg > g > g:nth-child(0) > ellipse

(svg> g> g：nth-??child（0）>椭圆)

svg > g > g > g

(svg> g> g> g)

svg > g > g > g:nth-child(2)

(svg> g> g> g：nth-??child（2）)

svg > g > g:nth-child(0) > g

(svg> g> g：nth-??child（0）> g)

svg > g > g:nth-child(0) > g > circle

(svg> g> g：nth-??child（0）> g>圆)

svg > g > g:nth-child(0) > g > circle > path:nth-child(0)

(svg> g> g：nth-??child（0）> g>圆>路径：nth-??child（0）)

svg > g > g:nth-child(0) > path

(svg> g> g：nth-??child（0）>路径)

 $(".vector svg").each(function() { $.each(this.children, function(i) { $("#getItems").append("<option>svg > "+ this.tagName +"</option>"); $("#getItems").append("<option>svg > "+ this.tagName + ":nth-child("+ i +")" +"</option>"); var str = this.tagName; $("#getItems").append("<option>svg > "+ str +" > "+ this.tagName +"</option>"); // has children if (this.children) { $.each(this.children, function(i) { $("#getItems").append("<option>svg > "+ str +" > "+ this.tagName + ":nth-child("+ i +")" +"</option>"); }); var str = this.tagName; $("#getItems").append("<option>svg > "+ str +" > "+ this.tagName +"</option>"); // are there more children? if (this.children) { $.each(this.children, function(i) { $("#getItems").append("<option>svg > "+ str +" > "+ this.tagName + ":nth-child("+ i +")" +"</option>"); }); } } }); }); 

 <select id="getItems"></select> <div class="vector"> <!--?xml version="1.0" encoding="UTF-8" standalone="no"?--> <!-- Generator: Gravit.io --> <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" style="isolation:isolate" viewBox="0 0 1080 1080"> <defs> <clipPath id="_clipPath_MxF8Dkiwk1DE61ESpuAKmuW45DuiKU6M"> <rect width="1080" height="1080"></rect> </clipPath> </defs> <g clip-path="url(#_clipPath_MxF8Dkiwk1DE61ESpuAKmuW45DuiKU6M)"> <rect x="0" y="0" width="1080" height="1080" transform="matrix(1,0,0,1,0,0)" fill="rgb(255,233,75)"></rect> <g> <ellipse cx="-230.50000000000034" cy="759.5" rx="340.49999999999966" ry="79.50000000000011" fill="rgb(251,201,57)"></ellipse> <g> <circle cx="-230.5000000000004" cy="772.0000000000001" r="257.99999999999994" fill="rgb(51,48,94)"></circle> <path d="M -361.2 470.15 L -101.8 470.15 C -91.424 470.15 -83 478.574 -83 488.95 L -83 488.95 C -83 499.326 -91.424 507.75 -101.8 507.75 L -361.2 507.75 C -371.576 507.75 -380 499.326 -380 488.95 L -380 488.95 C -380 478.574 -371.576 470.15 -361.2 470.15 Z" style="stroke:none;fill:#F38D63;stroke-miterlimit:10;"></path> <path d="M -231.5 312 L -231.5 312 C -162.787 312 -107 367.787 -107 436.5 L -107 570.5 C -107 639.213 -162.787 695 -231.5 695 L -231.5 695 C -300.213 695 -356 639.213 -356 570.5 L -356 436.5 C -356 367.787 -300.213 312 -231.5 312 Z" style="stroke:none;fill:#5E433C;stroke-miterlimit:10;"></path> <path d=" M -233.068 335 L -229.932 335 C -170.049 335 -121.432 383.617 -121.432 443.5 L -121.432 522 C -192.811 575.333 -266.179 575.343 -341.568 522 L -341.568 443.5 C -341.568 383.617 -292.951 335 -233.068 335 Z " fill="rgb(246,168,117)"></path> <ellipse cx="-229.49999999999994" cy="556.9999999999999" rx="55.50000000000006" ry="33" fill="rgb(94,67,60)"></ellipse> <circle cx="-270" cy="494.00000000000006" r="15" fill="rgb(47,52,59)"></circle> <circle cx="-189" cy="494.00000000000006" r="15" fill="rgb(47,52,59)"></circle> <path d="M -229 475 L -229 475 C -218.514 475 -210 483.514 -210 494 L -210 521.5 C -210 531.986 -218.514 540.5 -229 540.5 L -229 540.5 C -239.486 540.5 -248 531.986 -248 521.5 L -248 494 C -248 483.514 -239.486 475 -229 475 Z" style="stroke:none;fill:#F38E65;stroke-miterlimit:10;"></path> <path d=" M -108.403 417.94 C -117.354 358.012 -169.096 312 -231.5 312 L -231.5 312 C -293.904 312 -345.646 358.012 -354.597 417.94 C -318.826 429.713 -276.644 436.5 -231.5 436.5 C -186.356 436.5 -144.174 429.713 -108.403 417.94 Z " fill="rgb(94,67,60)"></path> <path d=" M -258 557 L -201 557 L -201 568.5 C -201 580.366 -210.634 590 -222.5 590 L -236.5 590 C -248.366 590 -258 580.366 -258 568.5 L -258 557 Z " fill="rgb(255,254,255)"></path> </g> <path d=" M -571 759.5 L -571 1080 L 110 1080 L 110 759.5 L 110 759.5 C 110 803.377 -42.573 839 -230.5 839 C -418.427 839 -571 803.377 -571 759.5 L -571 759.5 Z " fill="rgb(255,233,75)"></path> </g> <g> <ellipse cx="539.9999999999998" cy="759.5" rx="340.4999999999998" ry="79.50000000000011" fill="rgb(251,201,57)"></ellipse> <g> <circle cx="539.9999999999998" cy="772" r="258" fill="rgb(51,48,94)"></circle> <path d="M 409.3 470.15 L 668.7 470.15 C 679.076 470.15 687.5 478.574 687.5 488.95 L 687.5 488.95 C 687.5 499.326 679.076 507.75 668.7 507.75 L 409.3 507.75 C 398.924 507.75 390.5 499.326 390.5 488.95 L 390.5 488.95 C 390.5 478.574 398.924 470.15 409.3 470.15 Z" style="stroke:none;fill:#F38D63;stroke-miterlimit:10;"></path> <path d="M 539 312 L 539 312 C 607.713 312 663.5 367.787 663.5 436.5 L 663.5 570.5 C 663.5 639.213 607.713 695 539 695 L 539 695 C 470.287 695 414.5 639.213 414.5 570.5 L 414.5 436.5 C 414.5 367.787 470.287 312 539 312 Z" style="stroke:none;fill:#5E433C;stroke-miterlimit:10;"></path> <path d=" M 537.432 335 L 540.568 335 C 600.451 335 649.068 383.617 649.068 443.5 L 649.068 522 C 577.689 575.333 504.321 575.343 428.932 522 L 428.932 443.5 C 428.932 383.617 477.549 335 537.432 335 Z " fill="rgb(246,168,117)"></path> <ellipse cx="541.0000000000002" cy="557" rx="55.50000000000003" ry="33" fill="rgb(94,67,60)"></ellipse> <circle cx="500.5" cy="494.00000000000006" r="15" fill="rgb(47,52,59)"></circle> <circle cx="581.5" cy="494.00000000000006" r="15" fill="rgb(47,52,59)"></circle> <path d="M 541.5 475 L 541.5 475 C 551.986 475 560.5 483.514 560.5 494 L 560.5 521.5 C 560.5 531.986 551.986 540.5 541.5 540.5 L 541.5 540.5 C 531.014 540.5 522.5 531.986 522.5 521.5 L 522.5 494 C 522.5 483.514 531.014 475 541.5 475 Z" style="stroke:none;fill:#F38E65;stroke-miterlimit:10;"></path> <path d=" M 662.097 417.94 C 653.146 358.012 601.404 312 539 312 L 539 312 C 476.596 312 424.854 358.012 415.903 417.94 C 451.674 429.713 493.856 436.5 539 436.5 C 584.144 436.5 626.326 429.713 662.097 417.94 Z " fill="rgb(94,67,60)"></path> <path d=" M 512.5 557 L 569.5 557 L 569.5 568.5 C 569.5 580.366 559.866 590 548 590 L 534 590 C 522.134 590 512.5 580.366 512.5 568.5 L 512.5 557 Z " fill="rgb(255,254,255)"></path> </g> <path d=" M 199.5 759.5 L 199.5 1080 L 880.5 1080 L 880.5 759.5 L 880.5 759.5 C 880.5 803.377 727.927 839 540 839 C 352.073 839 199.5 803.377 199.5 759.5 L 199.5 759.5 Z " fill="rgb(255,233,75)"></path> </g> <g> <ellipse cx="1310.4999999999993" cy="759.5" rx="340.4999999999998" ry="79.50000000000011" fill="rgb(251,201,57)"></ellipse> <g> <circle cx="1310.4999999999995" cy="1299" r="258" fill="rgb(51,48,94)"></circle> <path d="M 1179.8 997.15 L 1439.2 997.15 C 1449.576 997.15 1458 1005.574 1458 1015.95 L 1458 1015.95 C 1458 1026.326 1449.576 1034.75 1439.2 1034.75 L 1179.8 1034.75 C 1169.424 1034.75 1161 1026.326 1161 1015.95 L 1161 1015.95 C 1161 1005.574 1169.424 997.15 1179.8 997.15 Z" style="stroke:none;fill:#F38D63;stroke-miterlimit:10;"></path> <path d="M 1309.5 839 L 1309.5 839 C 1378.213 839 1434 894.787 1434 963.5 L 1434 1097.5 C 1434 1166.213 1378.213 1222 1309.5 1222 L 1309.5 1222 C 1240.787 1222 1185 1166.213 1185 1097.5 L 1185 963.5 C 1185 894.787 1240.787 839 1309.5 839 Z" style="stroke:none;fill:#5E433C;stroke-miterlimit:10;"></path> <path d=" M 1307.932 862 L 1311.068 862 C 1370.951 862 1419.568 910.617 1419.568 970.5 L 1419.568 1049 C 1348.189 1102.333 1274.821 1102.343 1199.432 1049 L 1199.432 970.5 C 1199.432 910.617 1248.049 862 1307.932 862 Z " fill="rgb(246,168,117)"></path> <ellipse cx="1311.5" cy="1084" rx="55.5" ry="33" fill="rgb(94,67,60)"></ellipse> <circle cx="1271" cy="1021" r

Answer 1

I solved your problem with recursive function and I'm sharing it on fiddle and here too.

(我用递归函数解决了您的问题，我也在小提琴和这里分享它。)

( console.log(myMap); is for testing)

(（ console.log(myMap);用于测试）)

Here is fiddle link (I changed just javascript side)

(这是小提琴的链接（我只改变了JavaScript方面）)

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);