javascript中的第n个子选择器
[英]nth-child selector in javascript
问题描述
我正在使用以下 svg
const selector = document.querySelector('.yAxis g:nth-child(3)');
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> </head> <body> <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1280 720"> <rect class="vBoxRect" width="1280" height="720" fill="none" stroke="red"></rect> <rect class="boundRect" x="50" y="50" width="1180" height="620" fill="none" stroke="green"></rect> <g class="bound" style="transform: translate(50px, 50px);"> <g fill="none" font-size="10" font-family="sans-serif" text-anchor="end" class="yAxis"> <path class="domain" stroke="currentColor" d="M0.5,620.5V0.5"></path> <g class="tick" opacity="1" transform="translate(0,620.5)"> <line stroke="currentColor" x2="-6"></line> <text fill="currentColor" x="-9" dy="0.32em">0</text> </g> <g class="tick" opacity="1" transform="translate(0,549.531741126106)"> <line stroke="currentColor" x2="-6"></line> <text fill="currentColor" x="-9" dy="0.32em">10,000</text> </g> <g class="tick" opacity="1" transform="translate(0,478.56348225221205)"> <line stroke="currentColor" x2="-6"></line> <text fill="currentColor" x="-9" dy="0.32em">20,000</text> </g> <g class="tick" opacity="1" transform="translate(0,407.59522337831805)"> <line stroke="currentColor" x2="-6"></line> <text fill="currentColor" x="-9" dy="0.32em">30,000</text> </g> </g> </g> </svg> </body> </html>
我想编写一个查询，选择下面2nd <g> element of class="yAxis"
<g class="tick" opacity="1" transform="translate(0,549.531741126106)">
<line stroke="currentColor" x2="-6"></line>
<text fill="currentColor" x="-9" dy="0.32em">10,000</text>
</g>
const selector = document.querySelector('.yAxis g:nth-child(3)'); 正在选择正确的元素，但是为什么我在选择class=yAxis的2nd g元素时将3作为nth-child(3)值传递
2 个解决方案
解决方案1
1 已采纳 2022-05-11 05:03:11
您应该使用:nth-of-type而不是:nth-child因为:nth-child选择器也会计算第一个path元素：
const selector = document.querySelector('.yAxis g:nth-of-type(2)'); console.log(selector.outerHTML);
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1280 720"> <rect class="vBoxRect" width="1280" height="720" fill="none" stroke="red"></rect> <rect class="boundRect" x="50" y="50" width="1180" height="620" fill="none" stroke="green"></rect> <g class="bound" style="transform: translate(50px, 50px);"> <g fill="none" font-size="10" font-family="sans-serif" text-anchor="end" class="yAxis"> <path class="domain" stroke="currentColor" d="M0.5,620.5V0.5"></path> <g class="tick" opacity="1" transform="translate(0,620.5)"> <line stroke="currentColor" x2="-6"></line> <text fill="currentColor" x="-9" dy="0.32em">0</text> </g> <g class="tick" opacity="1" transform="translate(0,549.531741126106)"> <line stroke="currentColor" x2="-6"></line> <text fill="currentColor" x="-9" dy="0.32em">10,000</text> </g> <g class="tick" opacity="1" transform="translate(0,478.56348225221205)"> <line stroke="currentColor" x2="-6"></line> <text fill="currentColor" x="-9" dy="0.32em">20,000</text> </g> <g class="tick" opacity="1" transform="translate(0,407.59522337831805)"> <line stroke="currentColor" x2="-6"></line> <text fill="currentColor" x="-9" dy="0.32em">30,000</text> </g> </g> </g> </svg>
解决方案2
1 2022-05-11 05:19:18
path是第一个孩子。
并使用.yAxis g:nth-child(3)您选择 2th g
你可以使用.yAxis g:nth-of-type(2)
无法在 Javascript 中使用第 n 个子选择器内的变量值
[英]Unable to use value of variable inside nth-child selector in Javascript
在带有 javascript 的查询选择器 nth-child 中使用变量
[英]using a variable in query selector nth-child with javascript
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.