选择并单击类中的链接

Selecting and clicking a link within a class

本文关键字：链接 单击 选择      更新时间：2023-09-26

我正在修补一些javascript，想知道我将如何选择类中的第一个类。我希望能够转到一个页面并让用户脚本自动转到项目网格中第一个可用实例的链接。示例 html 如下所示：

<div class="item-wall">
    <div class="grid-item" data-column-index="0" data-pdpurl="http://www.LINK1.com"> … </div>
    <div class="grid-item" data-column-index="1" data-pdpurl="http://www.LINK2.com"> … </div>
    <div class="grid-item" data-column-index="2" data-pdpurl="http://www.LINK3.com"> … </div>
    <div class="grid-item" data-column-index="3" data-pdpurl="http://www.LINK4.com"> … </div>
    <div class="paging-bar hidden"> … </div>
    <div class="spacer"></div>
</div>

更具体地说，所需的最终结果是只转到第一个链接，www.LINK1.com .我尝试使用索引，但我不知道该怎么做。

到目前为止，这就是我产生的结果。 

waitForKeyElements ("DIV.item-wall", pickGrid)
function pickGrid (jNode) {
    var clickEvent  = document.createEvent ('MouseEvents');
    clickEvent.initEvent ('click', true, true);
    jNode[0].dispatchEvent (clickEvent);    
}

不幸的是，这会遍历整个项目墙并选择最后一个实例并转到该链接。任何帮助将不胜感激。谢谢！

你应该能够使用 querySelectorAll 来获取你需要的东西。像document.querySelectorAll(".item-wall>.grid-item:first-child")这样的东西应该有效。

扩展答案

离开您在问题中陈述的内容，如果您只想转到 data- 属性指定的 URL，您可以这样做：window.location.href=document.querySelectorAll(".item-wall>.grid-item:first-child").getAttribute("data-pdpurl")

使用 Tony 的选择器，再加上更多内容，您可以轻松获得链接：

纯JS：

document.querySelector('.item-wall>.grid-item:first-child[data-pdpurl]').getAttribute('data-pdpurl')

j查询：

$('.item-wall>.grid-item:first-child[data-pdpurl]').attr('data-pdpurl')

http://jsfiddle.net/paulinfrancis/yxsHN/

相关文章：