单击与选择器匹配的所有链接

CasperJS Click on all links matching a selector

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

我已经阅读了这个问题和它的答案，并希望进一步探讨一下。

我想使用CasperJS.click(选择器)函数来单击匹配选择器的多个链接。请注意，这些链接没有重要的href标签。

考虑以下标记:

HTML: 

<div>
    <h1 class='myLink'>Cocacola</h1>
    <div>
        <div>
            <h1 class='myLink'>Sprite</h1>
        </div>
    </div>
</div>

我在上面提到的答案建议删除链接，这样我们就可以用casper.exists等单击剩余的元素。如果我不想操作页面怎么办?

由于超出我想象的原因，使用:

document.querySelector("div .myLink:nth-of-type(1)");

捕捉到第一个h1, Cocacola。但是:

document.querySelector("div .myLink:nth-of-type(2)");

返回null。

这里的

小提琴。

任何想法?很多谢谢!

CSS spec for:n -of-type说明:

:n -of-type(an+b)伪类表示法表示一个元素在文档树中有一个+b-1的兄弟元素，在它前面有相同的展开元素名，对于n的任何零或正整数，并且有一个父元素。

也就是说，元素必须是兄弟元素。

例如,

<div>
  <h1 class='myLink'>Cocacola</h1>
  <h1 class='myLink'>Miranda</h1>
  <div>
    <div>
      <h1 class='myLink'>Sprite</h1>
    </div>
  </div>
</div>

选择器div .myLink:nth-of-type(2)将选择Miranda。也就是说，给定n个类型为'div . mylink '的兄弟元素，选择器将从中选择第二个元素。

这是上面例子的小提琴

希望这对你有帮助!

如前所述，:nth-of-type(1)可以工作而:nth-of-type(2)不能工作的原因是因为每种类型只有一个h1作为其父div的子类型。类选择器.myLink是一个完全独立的条件，不影响:nth-of-type()的工作方式。

尽管技术上有两个元素匹配:nth-of-type(1)，但您的第一个语句似乎返回第一个元素的原因是因为querySelector()只返回第一个匹配。

要获得匹配选择器的第一和第二个元素，使用querySelectorAll()而不是querySelector()，使用索引器而不是:nth-of-type()伪类:

var cocacola = document.querySelectorAll("div .myLink")[0];
var sprite = document.querySelectorAll("div .myLink")[1];
相关文章：