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

Question

我读过这个question and its answer ，并希望更进一步。

我想使用 CasperJS.click(selector)单击与选择器匹配的多个链接的函数。请注意，这些链接没有重要的 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，可口可乐。但是:

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

返回 null。

Fiddle here .

有什么想法吗？非常感谢!

Answer 1

:nth-of-type 的 CSS 规范说:

The :nth-of-type(an+b) pseudo-class notation represents an element that has an+b-1 siblings with the same expanded element name before it in the document tree, for any zero or positive integer value of n, and has a parent element.

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

例如，

<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”的兄弟元素，选择器将从它们中选择第二个元素。

这是 fiddle对于上面的例子。

希望这对您有所帮助!