:lt(index) 小なり

引数で与えたindex番号未満の番号の要素にマッチします。indexは0からはじめます。

下記の「indexが 2未満の要素はどれ?」というボタンをクリックしてみてください。

  • The first.
  • The second.
  • The third.



ソースは次の通りです。
<ul id="my1">
  <li>The first. </li>
  <li>The second. </li>
  <li>The third.</li>
</ul>

 <button onclick="
    $('#my1 li:lt(2)').append(' ← :lt(2)');
  ">
  indexが 2未満の要素はどれ?
</button>
上記では、:lt(2)セレクタにより「id名が#my1という要素内の li要素でindexが2番目」未満の要素を検索し、文字列が追記されます。

小なり(要素番号<index)な要素を検索したわけです。

もうひとつ、li要素ではないDOM要素で試してみましょう。次のサンプルは 、「td:lt(2)」によって、indexが2未満のtd要素の背景をグレーにします。

td 0. td 1. td 2. td 3.


ソースは次の通りです。
<div id="my2">
<table border="1">
  <tr>
    <td>td 0.</td>
    <td>td 1.</td>
    <td>td 2.</td>
    <td>td 3.</td>
  </tr>
</table>
</div>

<script type="text/javascript">
  jQuery(function($){
    $("table td:lt(2)","#my2")
        .css("background-color","#ccc");
  });
</script>


「id名が#my2という要素内の td要素でindexが2番目」未満の要素を検索し、背景色を"#ccc"に変えたわけです。

次ページでは 見出し要素を検索する セレクタを使います。