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

【问题标题】：How to increment the value for an element locator using javascript如何使用javascript增加元素定位器的值
【发布时间】：2020-10-13 11:19:06
【问题描述】：

我需要获取“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”次？在此先感谢:)

【问题讨论】：

你忘了分享它是如何递增的。请分享该信息
这能回答你的问题吗？ How to loop through ID elements in html
你是否能够同时解决增量@bhaws？

标签： javascript element playwright

【解决方案1】：

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

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

^ 表示“开始喜欢”。

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

【讨论】：

谢谢@Jon。基本上我正在测试一个我们需要不断添加条件最多 15 次的功能。它需要点击前一个 id，例如：id="select-fieldName-0-1"，然后生成 id="select-fieldName-0-1-0"，我需要点击新生成的 ID 添加下一个条件，然后生成 'id="select-fieldName-0-1 -1-0" 并单击它，依此类推，直到我到达第 15 位:(。即使我无法理解这种增量。

【解决方案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)
}

输出：

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 循环开始之前单击第一次迭代。

【讨论】：