时间戳

首页 > 解决方案 > 搜索元素的内容并单击其父项

javascript - 搜索元素的内容并单击其父项

问题描述

我正在尝试创建一个扩展，单击用户给出的价格项目。这是相关的popup.html：

<input style="display:none" /><input type="text" id="userInput" value='' />
<button id="clickme">Run</button>

单击“clickme”时，它会运行此 popup.js：

document.getElementById('clickme').addEventListener('click', function() {
 var price = '$'+ document.getElementById("userInput").value+".00";
 alert(price);
 $("p:contains("price")").parentNode.click();
});

如果您在表单中键入所需的价格为 48，它会返回一个价值为 $48.00 的警报。

然后它会点击该价格的项目，但这目前不起作用。这是我试图在其上运行扩展的网站相关部分的代码（不是我的网站）：

<div class="grid__item wide--one-fifth large--one-quarter medium-down--one-half">
 <a href="/collections/1seventeenweek7/products/copy-of-supreme-dazzle-warm- up-top-red" class="grid-link text-center">
  <p class="grid-link__title">Supreme Corner  Cap Light Blue</p>
  <p class="grid-link__meta">
   <span class="visually-hidden">Regular price</span>
   $48.00
  </p>
 </a>
</div>

我试图让它搜索包含 $48.00 的 p 元素，然后单击作为父元素的 a 元素，但这目前不起作用。我究竟做错了什么？- 谢谢

标签： javascriptjqueryhtmlgoogle-chrome-extension

解决方案

干得好。这会奏效！

document.getElementById('clickme').addEventListener('click', function() {
  var price = '$'+document.getElementById('userInput').value+'.00'
  var metas = document.getElementsByClassName('grid-link__meta')
  alert(price)
  for (let i = 0; i < metas.length; i++) {
    if (metas[i].innerHTML.includes(price)) metas[i].parentNode.click()
    break
  }
})

就个人而言，我真的很想使用类似下面的东西，但我忘记了getElementsByClassName它不会返回一个数组，而是一个 NodeList 对象。

var price = '$'+document.getElementById('userInput').value+'.00'
var metas = document.getElementsByClassName('grid-link__meta')
var match = metas.find((curr) => curr.innerHTML.includes(price))
match.parentNode.click()

推荐阅读