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，Cocacola。但是：

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

返回null。

Fiddle here

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

Answer 1

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

：nth-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。也就是说，给定类型为＆＃39; div .myLink＆＃39;的兄弟姐妹，选择器将从中选择第二个元素。

以上示例中的fiddle。

希望这有帮助！

Answer 2

如上所述，:nth-of-type(1)的工作原因，但:nth-of-type(2)并不是因为每种类型只有一个h1作为其父级{{1}的子级}。类选择器div完全是一个单独的条件，不会影响.myLink的工作方式。

第一个语句似乎返回第一个元素的原因，即使技术上两个元素与:nth-of-type()匹配，也是因为querySelector() returns only the first match。

要获取与您的选择器匹配的第一个和第二个元素，请使用:nth-of-type(1)代替querySelectorAll()，使用索引器而不是querySelector()伪类：

:nth-of-type()

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

2 个答案: