Question

获得特定类的元素数量后，如何遍历它们？

我正在使用Webdriver自动化一些测试。我可以使用

获取特定类的元素数量

<div>
    <tr class="test"></tr>
    <tr class="test"></tr>
    <tr class="test"></tr>
    <tr class="test"></tr>
</div>

let trNum = (await client.elements("div > tr.test")).value.length;

在这种情况下，

trNum等于4。我想遍历每个元素，最好使用nth-child。我怎样才能做到这一点？我尝试过

"div > tr.test:nth-child(1)"

但是没有用

Answer 1

使用querySelectorAll选择数量未知的.test类。之后，用querySelector遍历此列表，因为您确定该项目存在。

<div>
  <div class="test">item 1</div>
  <div class="test">item 2</div>
  <div class="test">item 3</div>
  <div class="test">item 4</div>
</div>

<script>
// nodelist (in example node 0 - 3)
let divs = document.querySelectorAll(".test");
// How many nodes (in example 4)
let divCount = divs.length;
// loop through nth-child(1) - nth-child(4) <=== not 0 - 3
var i, selector, divItem;
for (i = 1; i <= divCount; i++) {
  selector = ".test:nth-child(" + i + ")";
  divItem = document.querySelector(selector);
  console.log(divItem.innerHTML);
}
</script>

为解释起见，我没有将行放在一起。

使用CSS选择器，如何使用其类获取元素的第n个子元素

1 个答案: