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)');
正在选择正确的元素,但为什么我要传递 3
如nth-child(3)
当我选择 2nd
时的值class=yAxis
的 g 元素
最佳答案
您应该使用: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>
关于javascript - JavaScript 中的第 n 个子级选择器,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/72195604/