Qiita Teams that are logged in
You are not logged in to any team

Log in to Qiita Team
Community
OrganizationEventAdvent CalendarQiitadon (β)
Service
Qiita JobsQiita ZineQiita Blog
1
Help us understand the problem. What are the problem?

More than 3 years have passed since last update.

@fj58p

jsoupのselectorにて:nth-child(-n+m)が意図通りに動作しない件について

初めに

jsoupのselectorが便利で使っていたのですが、:nth-childの挙動がおかしいので調べた内容(あまり調べてません)とその対策です。
いろいろ書いてますが「:nth-child(-n+m)」ではなく「:lt(n)」でやりたいことができてしまいました。(最後に記述)

環境について

開発環境 : Eclipse pleiades 4.6.3
Java : Java8
jsoup : 1.9.2(※1.10.3でも同事象)

やりたいこと

selectorにて複数の要素を取得したうち、最初の5件のみを取得したい

通常のセレクタにて指定する場合(CSSやJavaScript等)

たとえば以下のような要素の中のaタグのみを取得したい場合。

<div class="list">
  <ul>
    <li><a href="aaa">リンク1</a></li>
    <li><a href="aaa">リンク2</a></li>
    <li><a href="aaa">リンク3</a></li>
    <li><a href="aaa">リンク4</a></li>
    <li><a href="aaa">リンク5</a></li>
    <li><a href="aaa">リンク6</a></li>
    <li><a href="aaa">リンク7</a></li>
    <li><a href="aaa">リンク8</a></li>
    <li><a href="aaa">リンク9</a></li>
    <li><a href="aaa">リンク10</a></li>
  </ul>
</div>

指定は以下のようになります

div.list> ul > li > a

これだと20件すべてが対象となります。
このうち、先頭5件だけを、となると以下のような書き方になります。

div.list> ul > li:nth-child(-n+5) > a

jsoupのselectorにて指定する場合

上記の指定をするとなぜか「5個目以降」が対象になってしまいます。
つまり、「リンク5」~「リンク10」までの6つが対象となります。

ですが、以下の指定を行うことにより、「先頭5件」を対象にできます。

div.list> ul > li:not(:nth-child(-n+6)) > a

ポイントは

  • :nth-childを:notで囲うこと
  • -n+5ではなく-n+6とすること

です。

なぜこれで上手く対象となるのかは分かっておりませんが、このような動作をするようです。

そもそも!

いただきましたコメントより、「:lt()」を使えば簡単でした・・・

div.list> ul > li:not(:nth-child(-n+6)) > a

ではなく

div.list> ul > li:lt(5) > a

で要望を満たせます。

お騒がせ致しましたm(_ _)m

Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
1
Help us understand the problem. What are the problem?