QuerySelectorAll 使用 class 和索引号
QuerySelectorAll using a class and index number
document.querySelectorAll('.fixers > track > tnty')
在 DOM 上有很多 classes 命名的固定器有没有办法包含什么 class 号码来使用类似
document.querySelectorAll('.fixers[2] > track > tnty')
目前我在做这个
document.getElementsByClassName('fixers')[2].querySelectorAll('track > tnty')
有没有更正确的方法?
谢谢
您可以使用 nth-child() 伪 class 到 select 第二组,如下所示:
const elems = document.querySelectorAll('.fixers:nth-child(2) > .track > .tnty');
console.log(elems);
console.log(elems[0].textContent);
<div class="fixers">
<div class="track">
<div class="tnty">1</div>
</div>
</div>
<div class="fixers"> <!-- 2 -->
<div class="track">
<div class="tnty">2</div>
</div>
</div>
<div class="fixers">
<div class="track">
<div class="tnty">3</div>
</div>
</div>
您可以使用特定的父项获取选定的“固定器”元素
document.querySelectorAll('.special-parent .fixers > track > tnty')
或:nth-child()
选择器
document.querySelectorAll('.fixers:nth-child(2) > track > tnty')
或使用上述两者。
document.querySelectorAll('.fixers > track > tnty')
在 DOM 上有很多 classes 命名的固定器有没有办法包含什么 class 号码来使用类似
document.querySelectorAll('.fixers[2] > track > tnty')
目前我在做这个
document.getElementsByClassName('fixers')[2].querySelectorAll('track > tnty')
有没有更正确的方法?
谢谢
您可以使用 nth-child() 伪 class 到 select 第二组,如下所示:
const elems = document.querySelectorAll('.fixers:nth-child(2) > .track > .tnty');
console.log(elems);
console.log(elems[0].textContent);
<div class="fixers">
<div class="track">
<div class="tnty">1</div>
</div>
</div>
<div class="fixers"> <!-- 2 -->
<div class="track">
<div class="tnty">2</div>
</div>
</div>
<div class="fixers">
<div class="track">
<div class="tnty">3</div>
</div>
</div>
您可以使用特定的父项获取选定的“固定器”元素
document.querySelectorAll('.special-parent .fixers > track > tnty')
或:nth-child()
选择器
document.querySelectorAll('.fixers:nth-child(2) > track > tnty')
或使用上述两者。