Question

我有以下问题。我有这种HTML代码结构：

<p class="description">
    lorem ipsum, bla bla bla 
    <a href="# onclick="somemethod(id)">click</a>
</p>
<p class="description">
    lorem ipsum, bla bla bla
</p>
<p class="description">
    lorem ipsum, bla bla bla 
    <a href="# onclick="somemethod(id)">click</a>
</p>

现在我需要在每个＆＃34; a＆＃34;上点击CasperJS。在与课程＆＃39;描述＆＃39;。

的段落中

我试试这个：

while (selector = document.querySelector('p.description a')) {
    casper.then(function () {
        this.click(selector);
        console.log('click');
    })
}

但它没有用。

有什么可能吗？

Answer 1

你有两个问题。

您无法同时使用document和casper，因为document仅在页面上下文（casper.evaluate()）内可用，但casper在页面上下文中不可用。
您需要在页面上下文中完全遍历可点击元素，或者完全在外部迭代。

CSS选择器

如果所有<p>元素都具有相同的父元素，并且中间没有其他元素，那么您只需使用CSS选择器即可实现此目的：

casper.then(function(){
    var numberOfElements = this.getElementsInfo("p.description").length;
    for(var i = 1; i <= numberOfElements; i++) {
        this.click("p:nth-child("+i+") a");
    }
});

请注意，无法根据类选择:nth-child，因此这也假定没有“description”类没有<p>元素。

XPath表达式

通过使用XPath表达式，可以使其更加健壮，因为它们更具表现力。

var x = require("casper").selectXPath;
...
casper.then(function(){
    var numberOfElements = this.getElementsInfo("p.description").length;
    for(var i = 1; i <= numberOfElements; i++) {
        this.click(x("(//p[contains(@class,'description')])["+i+"])/a"));
    }
});

其中(//p[contains(@class,'description')])["+i+"])表示构建了p个元素的NodeList（//p[contains(@class,'description')]），它们都包含“description”作为其“class”属性的一部分。然后例如(nodeList)[3])选择该列表中的第三个元素。

如果要在页面上下文中进行迭代，则需要在页面上下文中使用a click function。

点击全部＆＃39; a＆＃39;段落中的元素与CasperJS中的特定类

1 个答案:

CSS选择器

XPath表达式