jQuery

jQueryで要素を取得する方法(id、class、タグ、属性、入れ子)

本記事では、jQueryでid名・class名・タグ名・属性・入れ子要素を取得する方法について解説しています。

jQueryの学習におすすめ参考書
jQuery最高の教科書

本書情報
著者株式会社シフトブレイン
発売日2013/11/26
ページ数320ページ
Kindle版
レビュー
(Amazon)
(93件)

参考書が苦手な人はUdemyの動画がおすすめ
即実践 手を動かして6時間でjQueryをマスターしよう。
知識、経験ゼロからjQueryを使いこなそう

動画情報
作成者村守 康
学習時間6時間
受講者数28,547人
レビュー (425件)
動画の詳細はこちら

要素を取得する方法

id名

id名で要素を取得するには以下のように記述します。

<p id="text">サンプル</p> <!-- ←この要素を取得したい! -->
$("#text")
// 実行結果:S.fn.init [p#text]

ポイントはid名の前に付けている「#」の記号です。#はその後に続く文字列がid名であることを表しています。

id名が複数あった場合

HTMLの仕様上、id名は基本的に重複することが禁止されているため意図的に重複させることはありませんが、使われていると知らずに同じid名を付けてしまう可能性があります。

このような場合、一番初めに条件に一致した要素を取得します。下記のコードは同じid名が3つ存在した場合を想定したものです。

<div id="sample"></div>
<p id="sample"></p>
<span id="sample"></p>
$("#sample")
// 実行結果:S.fn.init [div#sample]

今回の場合、一番初めにidが指定されているdivタグが取得されていることが確認できます。

class名

class名で要素を取得するには以下のように記述します。

<ul class="list">
  <!-- ↓3つの要素を取得したい! -->
  <li class="list__item">リスト1</li>
  <li class="list__item">リスト2</li>
  <li class="list__item">リスト3</li>
</ul>
$(".list__item")
// 実行結果:S.fn.init(3) [li.list__item, li.list__item, li.list__item, prevObject: S.fn.init(1)]

ポイントはclass名の前に付けている「.」の記号です。.はその後に続く文字列がclass名であることを表しています。

タグ名

タグ名で要素を取得するには以下のように記述します。

<!-- ↓divタグの要素を取得したい! -->
<div class="content01">
    <p>コンテンツ1</p>
</div>
<div class="content02">
    <p>コンテンツ2</p>
</div>
<div class="content03">
    <p>コンテンツ3</p>
</div>
$("div")
// 実行結果:S.fn.init(3) [div.content01, div.content02, div.content03, prevObject: S.fn.init(1)]

タグ名で要素を取得する場合、id名やクラス名のように検索したい文字列の前に記号は不要です。

属性&属性値

属性と属性値で要素を取得するには以下のように記述します。

<div>
  <input type="text" placeholder="テキスト入力スペース" />
</div>
<div>
  <label> <input type="checkbox" name="lang" value="html" />HTML </label>
  <label> <input type="checkbox" name="lang" value="css" />CSS </label>
  <label>
    <input type="checkbox" name="lang" value="javascript" />JavaScript
  </label>
</div>
<div>
  <label>
    <input type="radio" name="editor" value="Visual Studio Code" />Visual Studio Code</label>
  <label> <input type="radio" name="editor" value="Atom" />Atom </label>
  <label> <input type="radio" name="editor" value="Emacs" />Emacs </label>
</div>

<p class="text">テキスト1</p>
<p>テキスト2</p>
/* ↓<input type="text">のみ取得! */
$("input[type='text']")
// 実行結果:S.fn.init [input, prevObject: S.fn.init(1)]0: inputlength: 1prevObject: S.fn.init [document][[Prototype]]: Object(0)

/* ↓<input name="lang">のみ取得! */
$("input[name='lang']")
// 実行結果:S.fn.init(3) [input, input, input, prevObject: S.fn.init(1)]

/* ↓pタグにクラスが付与されている要素の取得! */
$("p[class]")
// 実行結果:S.fn.init [p.text, prevObject: S.fn.init(1)]

[]内に指定したい属性または、属性=属性値を記述します。気をつけるポイントは属性値を指定する時に、セレクタの全体に囲っている記号が「””(ダブルクォーテーション)」の場合、属性値を囲う記号は「”(シングルクォーテーション)」である必要があります。逆もまた然りで、セレクタの全体を囲っている記号が「”」だった場合、属性値を囲う記号は「””」でなければなりません。

入れ子

特定のタグの配下にある要素のみを取得するには以下のように記述します。

 <!-- ↓content1内にあるliタグだけ取得したい! -->
<ul class="content1">
  <li>リスト1</li>
  <li>リスト2</li>
  <li>リスト3</li>
  <div>
    <li>リスト4</li>
  </div>
</ul>
<ul class="content2">
  <li>リスト1</li>
  <li>リスト2</li>
  <li>リスト3</li>
</ul>
$("ul.content1 li")
// 実行結果:S.fn.init(4) [li, li, li, li, prevObject: S.fn.init(1)]

$("ul.content1 > li")
// 実行結果:S.fn.init(3) [li, li, li, prevObject: S.fn.init(1)]

記号の「>」は、直下の要素のみを対象としたい場合に使います。今回の例ですとulタグ内に4つliタグがありますが、一つはdivタグに囲われています。このようなシチュエーションで、>を使うとdivタグに囲われているliタグは対象から外れます。

ブログランキング・にほんブログ村へ PVアクセスランキング にほんブログ村