如何使用 javascript 增加元素定位器的值

Question

我需要抓取“n”行的元素，但是元素值递增如下：

<select aria-invalid="false" id="select-fieldName-0-1" class="css-14xtrl2">. 
<select aria-invalid="false" id="select-fieldName-0-1-0" class="css-14xtrl2">.
<select aria-invalid="false" id="select-fieldName-0-1-1-0" class="css-14xtrl2">.
<select aria-invalid="false" id="select-fieldName-0-1-1-1-0" class="css-14xtrl2">.

等等。 如何获取元素“id”以将其循环“n”次？ 提前致谢：）

Answer 1

我不知道你为什么要这样增加，但如果我理解正确，你想选择所有这些的值。 在@happyvirus 评论之后，您应该这样做：

const selectBoxes = document.querySelectorAll('[id^=select-fieldName]');

^表示“开始喜欢”。

然后你可以循环选择框，选择值，操作它们，等等。

Answer 2

在您的示例的前三个元素的转换中，我没有找到一致的模式。 如果我认为第二个元素是准确的，那么您可以使用以下 JavaScript 方法生成选择器： String.split() 、 Array.splice() 、 Array.indexOf()和Array.join()

您可以获取一个字符串模式（ '-0-1-' ），然后插入增量字符串部分（ '1-' ）。 注意： Array.splice()是一种就地数组方法，它直接应用于原始数组。

示例（迭代 8 次）：

let sel ='select-fieldName-0-1-0'
for (let i = 0; i < 8; i++) {
  const selArr = sel.split('')
  selArr.splice(sel.indexOf('-0-1-') + '-0-1-'.length, 0, '1-')
  sel = selArr.join('')
  console.log(sel)
}

Output：

select-fieldName-0-1-1-0
select-fieldName-0-1-1-1-0
select-fieldName-0-1-1-1-1-0
select-fieldName-0-1-1-1-1-1-0
select-fieldName-0-1-1-1-1-1-1-0
select-fieldName-0-1-1-1-1-1-1-1-0
select-fieldName-0-1-1-1-1-1-1-1-1-0
select-fieldName-0-1-1-1-1-1-1-1-1-1-0

所以如果你在你的主剧本中，那么你可以使用for循环与上面选择器模式的元素进行交互：

for (...)
  ...
  await page.click(sel)
}

将剧作家动作放置在正确的位置，例如，如果按照我的示例，应该在 for 循环开始之前单击第一次迭代。