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

【问题标题】：CasperJS Click on all links matching a selectorCasperJS 单击与选择器匹配的所有链接
【发布时间】：2014-09-26 00:07:09
【问题描述】：

我已阅读此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.

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

【问题讨论】：

Click all anchor tags on page with given class, but cancel prior to navigation 的可能副本
如果您不希望加载新页面，则可以使用this。
nth-of-type 仅对元素类型起作用，在本例中为 h1。它不会考虑.myLink 类。索引仅对同一父级下的元素有意义。

标签： javascript css-selectors casperjs selectors-api

【解决方案1】：

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

:nth-of-type(an+b) 伪类表示法表示一个元素在文档树中具有 an+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) 将选择米兰达。也就是说，给定 n 个 'div .myLink' 类型的兄弟，选择器将从它们中选择第二个元素。

这是上面示例的fiddle。

希望这会有所帮助！

【讨论】：

【解决方案2】：

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

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

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

var cocacola = document.querySelectorAll("div .myLink")[0];
var sprite = document.querySelectorAll("div .myLink")[1];

【讨论】：