Question

我正在修补一些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);    
}

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

Answer 1

您应该可以使用querySelectorAll来获得所需内容。像document.querySelectorAll(".item-wall>.grid-item:first-child")这样的东西应该有效。

扩展答案

关闭您在问题中说明的内容，如果您只想转到data-attribute指定的网址，则可以执行以下操作：window.location.href=document.querySelectorAll(".item-wall>.grid-item:first-child").getAttribute("data-pdpurl")

Answer 2

使用Tony的选择器，再多一点，您可以轻松获得链接：

Pure JS：

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

jQuery的：

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

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

选择并单击类中的链接

2 个答案: