【連載】jQueryでDOMを取得しよう – 5日目「複数のうちインデックス番号でフィルタリングする」

今回は「複数のうちインデックス番号でフィルタリングする」について紹介したいと思います。

DOM構成

まずは今回使用するDOMの構成についてです。

<table border=1>
  <tbody>
    <tr>
      <td class="cls001" id="id001"><a href="./gyudon">牛丼</a></td>
      <td class="cls002" id="id002"><a href="./cheese">とろーり3種のチーズ牛丼</a></td>
      <td class="cls003" id="id003"><a href="./mentai">高菜明太マヨ牛丼</a></td>
    </tr>
    <tr>
      <td class="cls004" id="id004"><a href="./negi">ねぎ玉牛丼</a></td>
      <td class="cls005" id="id005"><a href="./kimuchi">ねぎキムチ牛丼</a></td>
      <td class="cls006" id="id006"><a href="./okura">かつぶしオクラ牛丼</a></td>
    </tr>
    <tr>
      <td class="cls007" id="id007"><a href="./onisara">シャキッと和風オニサラ牛丼</a></td>
      <td class="cls008" id="id008"><a href="./ponzu">おろしポン酢牛丼</a></td>
      <td class="cls009" id="id009"><a href="./sanma">さんま牛丼</a></td>
    </tr>
  </tbody>
</table>

取得してみる

今回使用するのはeq()というメソッドです。引数に数値を渡すことで、そのインデックス番号のものを取得することができます。

まずはねぎキムチ牛丼を取得してみましょう。

ねぎキムチ牛丼は5番目(0から始まるインデックスでいうと4になる)のtdであるので以下のようにすることで取得できます。

$('td').eq(4)[0]

<td class="cls005" id="id005"><a href="./kimuchi">ねぎキムチ牛丼</a></td>

簡単ですね。

次は2行目2列目のねぎキムチ牛丼を取得してみます。

$('tr').eq(1).find('td').eq(1)[0]

<td class="cls005" id="id005"><a href="./kimuchi">ねぎキムチ牛丼</a></td>

指定の仕方は違いますが、結果は変わりません。

findメソッドについてはまたあとで説明したいと思いますが、このようにして検索結果に対してインデックスを指定することで、取得することができます。