1

この質問とその回答を読みましたが、もう少し進めたいと思います。

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。

ここでフィドル。

何か案は？どうもありがとう！

4

2 に答える 2

3

:nth-of-type のCSS 仕様は、次のように述べています。

:nth-of-type(an+b) 疑似クラス表記は、n のゼロまたは正の整数値に対して、ドキュメント ツリー内で前に同じ展開された要素名を持つ +b-1 個の兄弟を持つ要素を表します。親要素があります。

つまり、要素は兄弟でなければなりません。

例えば、

<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)はミランダを選択します。つまり、「div .myLink」タイプの兄弟が n 個ある場合、セレクターはそれらから 2 番目の要素を選択します。

上記の例のフィドルは次のとおりです。

お役に立てれば！

于 2014-08-03T09:27:27.383 に答える
2

前述のように、その理由:nth-of-type(1)は機能しますが機能しないのは、その親の子として各タイプが:nth-of-type(2)1 つだけしかないためです。クラス セレクターは完全に独立した条件であり、動作には影響しません。h1div.myLink:nth-of-type()

技術的には2 つの要素 matchingがあるにもかかわらず、最初のステートメントが最初の要素を返すように見える理由は、最初の match のみを返す:nth-of-type(1)ためです。querySelector()

セレクターに一致する最初と 2 番目の要素を取得するには、querySelectorAll()代わりに を使用し、疑似クラスquerySelector()の代わりにインデクサーを使用します。:nth-of-type()

var cocacola = document.querySelectorAll("div .myLink")[0];
var sprite = document.querySelectorAll("div .myLink")[1];
于 2014-08-03T12:58:16.870 に答える