【Amazon】人気の商品が日替わりで登場!
毎日お得なタイムセール!商品をみる

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

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

JavaScriptの学習におすすめ書籍
1冊ですべて身につくJavaScript入門講座
総合評価
( 5 )
メリット
  • 誰でも分かるように嚙み砕いて説明してくれる
  • アニメーションの知識が深く学べる
  • 1つのWebサイトを作りながら学べる
先輩くん

Amazon Kindle Unlimitedに登録すると、月額980円で読み放題だからオススメだよ!

後輩ちゃん

初回30日間は無料だから、まだ登録したことのない人はぜひ試してみてね!

全プログラマー必見!
変数名/関数名にもう悩まない!
リーダブルコード
総合評価
( 5 )
メリット
  • 美しいコードが書けるが自然と書けるようになる
  • 他の開発者が理解しやすいコードになる
著:Dustin Boswell, 著:Trevor Foucher, 解説:須藤 功平, 翻訳:角 征典
¥2,640 (2023/07/23 02:48時点 | Amazon調べ)
目次

要素を取得する方法

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アクセスランキング にほんブログ村 FC2 Blog Ranking

よかったらシェアしてね!
  • URLをコピーしました!
  • URLをコピーしました!
目次