javascript - CasperJS Click on all links matching a selector - Stack Overflow

admin管理员组

文章数量:1431016

I have read this question and its answer, and wish to take it a little bit further.

I want to use CasperJS.click(selector) function to click multiple links matching a selector. Please note that the links do not have a significant href tag.

Consider the following markup:

HTML:

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

The answers I've mentioned on top here suggest deleting the links so we can click the remaining elements with casper.exists and so on. What if I don't want to manipulate the page?

For reasons beyond my conception, using:

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

catches the first h1, Cocacola. But:

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

returns null.

Fiddle here.

Any ideas? Many thanks!

I have read this question and its answer, and wish to take it a little bit further.

I want to use CasperJS.click(selector) function to click multiple links matching a selector. Please note that the links do not have a significant href tag.

Consider the following markup:

HTML:

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

The answers I've mentioned on top here suggest deleting the links so we can click the remaining elements with casper.exists and so on. What if I don't want to manipulate the page?

For reasons beyond my conception, using:

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

catches the first h1, Cocacola. But:

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

returns null.

Fiddle here.

Any ideas? Many thanks!

• javascript
• css-selectors
• casperjs
• selectors-api

Share Improve this question Follow edited May 23, 2017 at 11:46 CommunityBot 111 silver badge asked Aug 3, 2014 at 8:49 user1555863user1555863 2,60766 gold badges3636 silver badges5151 bronze badges 3

• possible duplicate of Click all anchor tags on page with given class, but cancel prior to navigation – Artjom B. Commented Aug 3, 2014 at 9:53
• If you don't expect that a new page is loaded then you can use this. – Artjom B. Commented Aug 3, 2014 at 10:04
• nth-of-type operates only on element types, h1 in this case. It will not take the class .myLink into account. The index only means something for elements directly under the same parent. – Artjom B. Commented Aug 3, 2014 at 10:16

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 3

CSS spec for :nth-of-type says that:

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.

That is, the elements will have to be siblings.

For example,

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

The selector div .myLink:nth-of-type(2) will select Miranda. That is, given n siblings of type 'div .myLink', the selector will select the second element from them.

Here is the fiddle for the above example.

Hope this helps!

As mentioned, the reason :nth-of-type(1) works but :nth-of-type(2) doesn't is because there is only exactly one h1 of each type as a child of its parent div. The class selector .myLink is a separate condition entirely and does not affect how :nth-of-type() works.

The reason your first statement appears to return the first element, even though there are technically two elements matching :nth-of-type(1), is because querySelector() returns only the first match.

To obtain the first and second elements matching your selector, use querySelectorAll() instead of querySelector(), and an indexer instead of the :nth-of-type() pseudo-class:

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

本文标签： javascriptCasperJS Click on all links matching a selectorStack Overflow