堆栈内存溢出
  繁体   English   中英

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

[英]All elements children as select options

 原文  2019-11-28 01:48:36  5   2    javascript/ jquery/ html

问题描述

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

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

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

SVG > 定义
SVG > 克
svg > g > 矩形
svg > g > g
svg > g > g:nth-child(0)
svg > g > g:nth-child(1)
svg > g > g:nth-child(2)
svg > g > g:nth-child(0) > 椭圆
svg > g > g > g
svg > g > g > g:nth-child(2)
svg > g > g:nth-child(0) > g
svg > g > g:nth-child(0) > g > circle
svg > g > g:nth-child(0) > g > circle > path:nth-child(0)
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="15" fill="rgb(47,52,59)"></circle> <circle cx="1352.0000000000005" cy="1021" r="15" fill="rgb(47,52,59)"></circle> <path d="M 1312 1002 L 1312 1002 C 1322.486 1002 1331 1010.514 1331 1021 L 1331 1048.5 C 1331 1058.986 1322.486 1067.5 1312 1067.5 L 1312 1067.5 C 1301.514 1067.5 1293 1058.986 1293 1048.5 L 1293 1021 C 1293 1010.514 1301.514 1002 1312 1002 Z" style="stroke:none;fill:#F38E65;stroke-miterlimit:10;"></path> <path d=" M 1432.597 944.94 C 1423.646 885.012 1371.904 839 1309.5 839 L 1309.5 839 C 1247.096 839 1195.354 885.012 1186.403 944.94 C 1222.174 956.713 1264.356 963.5 1309.5 963.5 C 1354.644 963.5 1396.826 956.713 1432.597 944.94 Z " fill="rgb(94,67,60)"></path> <path d=" M 1283 1084 L 1340 1084 L 1340 1095.5 C 1340 1107.366 1330.366 1117 1318.5 1117 L 1304.5 1117 C 1292.634 1117 1283 1107.366 1283 1095.5 L 1283 1084 Z " fill="rgb(255,254,255)"></path> </g> <path d=" M 970 759.5 L 970 1080 L 1651 1080 L 1651 759.5 L 1651 759.5 C 1651 803.377 1498.427 839 1310.5 839 C 1122.573 839 970 803.377 970 759.5 L 970 759.5 Z " fill="rgb(255,233,75)"></path> </g> <g> <ellipse cx="2080.999999999999" cy="759.5" rx="340.49999999999966" ry="79.50000000000011" fill="rgb(251,201,57)"></ellipse> <g> <circle cx="2080.999999999999" cy="1299" r="258" fill="rgb(51,48,94)"></circle> <path d="M 1950.3 997.15 L 2209.7 997.15 C 2220.076 997.15 2228.5 1005.574 2228.5 1015.95 L 2228.5 1015.95 C 2228.5 1026.326 2220.076 1034.75 2209.7 1034.75 L 1950.3 1034.75 C 1939.924 1034.75 1931.5 1026.326 1931.5 1015.95 L 1931.5 1015.95 C 1931.5 1005.574 1939.924 997.15 1950.3 997.15 Z" style="stroke:none;fill:#F38D63;stroke-miterlimit:10;"></path> <path d="M 2080 839 L 2080 839 C 2148.713 839 2204.5 894.787 2204.5 963.5 L 2204.5 1097.5 C 2204.5 1166.213 2148.713 1222 2080 1222 L 2080 1222 C 2011.287 1222 1955.5 1166.213 1955.5 1097.5 L 1955.5 963.5 C 1955.5 894.787 2011.287 839 2080 839 Z" style="stroke:none;fill:#5E433C;stroke-miterlimit:10;"></path> <path d=" M 2078.432 862 L 2081.568 862 C 2141.451 862 2190.068 910.617 2190.068 970.5 L 2190.068 1049 C 2118.689 1102.333 2045.321 1102.343 1969.932 1049 L 1969.932 970.5 C 1969.932 910.617 2018.549 862 2078.432 862 Z " fill="rgb(246,168,117)"></path> <ellipse cx="2082" cy="1084" rx="55.5" ry="33" fill="rgb(94,67,60)"></ellipse> <circle cx="2041.5" cy="1021" r="15.000000000000114" fill="rgb(47,52,59)"></circle> <circle cx="2122.5" cy="1021" r="15" fill="rgb(47,52,59)"></circle> <path d="M 2082.5 1002 L 2082.5 1002 C 2092.986 1002 2101.5 1010.514 2101.5 1021 L 2101.5 1048.5 C 2101.5 1058.986 2092.986 1067.5 2082.5 1067.5 L 2082.5 1067.5 C 2072.014 1067.5 2063.5 1058.986 2063.5 1048.5 L 2063.5 1021 C 2063.5 1010.514 2072.014 1002 2082.5 1002 Z" style="stroke:none;fill:#F38E65;stroke-miterlimit:10;"></path> <path d=" M 2203.097 944.94 C 2194.146 885.012 2142.404 839 2080 839 L 2080 839 C 2017.596 839 1965.854 885.012 1956.903 944.94 C 1992.674 956.713 2034.856 963.5 2080 963.5 C 2125.144 963.5 2167.326 956.713 2203.097 944.94 Z " fill="rgb(94,67,60)"></path> <path d=" M 2053.5 1084 L 2110.5 1084 L 2110.5 1095.5 C 2110.5 1107.366 2100.866 1117 2089 1117 L 2075 1117 C 2063.134 1117 2053.5 1107.366 2053.5 1095.5 L 2053.5 1084 Z " fill="rgb(255,254,255)"></path> </g> <path d=" M 1740.5 759.5 L 1740.5 1080 L 2421.5 1080 L 2421.5 759.5 L 2421.5 759.5 C 2421.5 803.377 2268.927 839 2081 839 C 1893.073 839 1740.5 803.377 1740.5 759.5 L 1740.5 759.5 Z " fill="rgb(255,233,75)"></path> </g> </g> </svg> </div> <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

2 个解决方案

解决方案1
 1 已采纳  2019-11-30 16:40:43

实现这一目标的一种方法是：

  1. 使用*查找所有元素
  2. 使用.parentsUntil()获取父元素
  3. 检查每个父母是否有兄弟姐妹。
    • 如果有兄弟姐妹添加:nth-child()到标签
    • 否则只需添加标签

看这个例子： 

 jQuery("svg").find("*").each(function() { let item = []; _this = jQuery(this); _this.parentsUntil('.vector').addBack().each(function(i, e) { const el = jQuery(e); const propName = el.prop("tagName"); const siblings = el.siblings(propName); if (siblings.length > 0) { const index = el.index(); item.push(propName + `:nth-child(${index})`); } else { item.push(propName); } }); let selector = item.join(" > "); $("#getItems").append("<option>" + selector + "</option>"); });
 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <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="15" fill="rgb(47,52,59)"></circle> <circle cx="1352.0000000000005" cy="1021" r="15" fill="rgb(47,52,59)"></circle> <path d="M 1312 1002 L 1312 1002 C 1322.486 1002 1331 1010.514 1331 1021 L 1331 1048.5 C 1331 1058.986 1322.486 1067.5 1312 1067.5 L 1312 1067.5 C 1301.514 1067.5 1293 1058.986 1293 1048.5 L 1293 1021 C 1293 1010.514 1301.514 1002 1312 1002 Z" style="stroke:none;fill:#F38E65;stroke-miterlimit:10;"></path> <path d=" M 1432.597 944.94 C 1423.646 885.012 1371.904 839 1309.5 839 L 1309.5 839 C 1247.096 839 1195.354 885.012 1186.403 944.94 C 1222.174 956.713 1264.356 963.5 1309.5 963.5 C 1354.644 963.5 1396.826 956.713 1432.597 944.94 Z " fill="rgb(94,67,60)"></path> <path d=" M 1283 1084 L 1340 1084 L 1340 1095.5 C 1340 1107.366 1330.366 1117 1318.5 1117 L 1304.5 1117 C 1292.634 1117 1283 1107.366 1283 1095.5 L 1283 1084 Z " fill="rgb(255,254,255)"></path> </g> <path d=" M 970 759.5 L 970 1080 L 1651 1080 L 1651 759.5 L 1651 759.5 C 1651 803.377 1498.427 839 1310.5 839 C 1122.573 839 970 803.377 970 759.5 L 970 759.5 Z " fill="rgb(255,233,75)"></path> </g> <g> <ellipse cx="2080.999999999999" cy="759.5" rx="340.49999999999966" ry="79.50000000000011" fill="rgb(251,201,57)"></ellipse> <g> <circle cx="2080.999999999999" cy="1299" r="258" fill="rgb(51,48,94)"></circle> <path d="M 1950.3 997.15 L 2209.7 997.15 C 2220.076 997.15 2228.5 1005.574 2228.5 1015.95 L 2228.5 1015.95 C 2228.5 1026.326 2220.076 1034.75 2209.7 1034.75 L 1950.3 1034.75 C 1939.924 1034.75 1931.5 1026.326 1931.5 1015.95 L 1931.5 1015.95 C 1931.5 1005.574 1939.924 997.15 1950.3 997.15 Z" style="stroke:none;fill:#F38D63;stroke-miterlimit:10;"></path> <path d="M 2080 839 L 2080 839 C 2148.713 839 2204.5 894.787 2204.5 963.5 L 2204.5 1097.5 C 2204.5 1166.213 2148.713 1222 2080 1222 L 2080 1222 C 2011.287 1222 1955.5 1166.213 1955.5 1097.5 L 1955.5 963.5 C 1955.5 894.787 2011.287 839 2080 839 Z" style="stroke:none;fill:#5E433C;stroke-miterlimit:10;"></path> <path d=" M 2078.432 862 L 2081.568 862 C 2141.451 862 2190.068 910.617 2190.068 970.5 L 2190.068 1049 C 2118.689 1102.333 2045.321 1102.343 1969.932 1049 L 1969.932 970.5 C 1969.932 910.617 2018.549 862 2078.432 862 Z " fill="rgb(246,168,117)"></path> <ellipse cx="2082" cy="1084" rx="55.5" ry="33" fill="rgb(94,67,60)"></ellipse> <circle cx="2041.5" cy="1021" r="15.000000000000114" fill="rgb(47,52,59)"></circle> <circle cx="2122.5" cy="1021" r="15" fill="rgb(47,52,59)"></circle> <path d="M 2082.5 1002 L 2082.5 1002 C 2092.986 1002 2101.5 1010.514 2101.5 1021 L 2101.5 1048.5 C 2101.5 1058.986 2092.986 1067.5 2082.5 1067.5 L 2082.5 1067.5 C 2072.014 1067.5 2063.5 1058.986 2063.5 1048.5 L 2063.5 1021 C 2063.5 1010.514 2072.014 1002 2082.5 1002 Z" style="stroke:none;fill:#F38E65;stroke-miterlimit:10;"></path> <path d=" M 2203.097 944.94 C 2194.146 885.012 2142.404 839 2080 839 L 2080 839 C 2017.596 839 1965.854 885.012 1956.903 944.94 C 1992.674 956.713 2034.856 963.5 2080 963.5 C 2125.144 963.5 2167.326 956.713 2203.097 944.94 Z " fill="rgb(94,67,60)"></path> <path d=" M 2053.5 1084 L 2110.5 1084 L 2110.5 1095.5 C 2110.5 1107.366 2100.866 1117 2089 1117 L 2075 1117 C 2063.134 1117 2053.5 1107.366 2053.5 1095.5 L 2053.5 1084 Z " fill="rgb(255,254,255)"></path> </g> <path d=" M 1740.5 759.5 L 1740.5 1080 L 2421.5 1080 L 2421.5 759.5 L 2421.5 759.5 C 2421.5 803.377 2268.927 839 2081 839 C 1893.073 839 1740.5 803.377 1740.5 759.5 L 1740.5 759.5 Z " fill="rgb(255,233,75)"></path> </g> </g> </svg> </div>

解决方案2
 0  2019-11-30 11:28:42

我用递归函数解决了你的问题，我也在小提琴和这里分享它。 ( console.log(myMap);用于测试)

这是小提琴链接（我只更改了 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);

暂无
暂无

声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

相关问题 将鼠标悬停在子元素上时如何 select 所有子元素 除了一个div和子节点之外，如何选择DOM中的所有元素 使用jQuery选择具有至少2个子元素的所有元素 选择大孩子元素 如何 select 除所有元素外的所有元素<p>元素及其所有使用 JavaScript 的子元素？</p> 选择所有选项 jQuery选择所有子级 排序选择选项元素 选择只有一些元素的孩子 如何使用JavaScript选择除了一个及所有子元素之外的所有元素？
相关标签
 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM