• HOME > 
  • JavaScript > 
  • jQueryでidを取得する方法【attrメソッドの使い方】

jQueryでidを取得する方法【attrメソッドの使い方】

投稿日:

このページにはGoogleアドセンス広告とアフィリエイト広告が含まれています。

カテゴリー記事のアイキャッチ画像

本記事は執筆時点(2022年03月11日)の情報をベースにしております。掲載している情報が最新ではない可能性がありますので何卒ご容赦ください。

広告
広告

idを取得する場面は?

jQueryでは、操作したい対象を特定するためのセレクターとしてHTML側に付与したidを使用します。

書き方は、CSSと同様に先頭に「#」を付けて記述します。

idをセレクターとして使用することで、そのidを持つ要素をメソッドを使って操作することができます。

下の例では、text()メソッドを使って対象のidを持つ要素のテキストを取得しています。

HTML

<div id="test_1" class="sample">ダミーテキスト1</div>

jQuery

$(function(){
    var test = $("#test_1").text();
    console.log("結果:「" + test + "」");
});

プレビュー

結果:「ダミーテキスト1」
リンク先のサムネイル
jQueryのセレクターの種類と使い方

jQueryのセレクターとは、操作したいHTML要素の特定に使うものです。セレクタ―で指定した要素に対して、メソッドを使って取得や変更などさまざまな操作を行うことができます...【もっと読む】

id名を取得する方法

jQueryでHTMLの要素に付与されているidを取得するためには「attr()」メソッドを使用します。

attr()メソッドは次のように記述して使います。

attrメソッドの書き方

attrメソッドは要素の属性を取得できるメソッドです。id以外にも対象の要素のクラスや属性などを取得することが可能です。

下の例では、「sample」クラスをもつ要素のid名を取得しています。

HTML

<div id="test_1" class="sample">ダミーテキスト1</div>

jQuery

$(function(){
    var test = $(".sample").attr("id");
    console.log("結果:「" + test + "」");
});

プレビュー

結果:「test_1」

なお、指定した要素がidを持たない場合は「undifined」が返されます。

複数のidを取得するには?

複数の要素に付与されているidを全て取得したい場合は、attrメソッドは使わずに下記のように記述します。

複数のidを取得する書き方

下の例では、divタグに付与されているidを全てコンソールに出力しています。

HTML

<div id="test_1" class="sample">ダミーテキスト1</div>
<div id="test_2" class="sample">ダミーテキスト2</div>
<div id="test_3" class="sample">ダミーテキスト3</div>
<div id="test_4" class="sample">ダミーテキスト4</div>

jQuery

$(function(){
    var test = $("div[id]");
    console.log(test);
});

プレビュー

複数のidを取得する書き方

idを追加・変更する方法

idの追加や変更もattr()メソッドを使って行います。

attrメソッドを下記のように記述することで、idがない場合は追加され、idがある場合は変更されます。

idを追加・変更する書き方

下の例では、要素のid名を変更したあと再度attrメソッドで取得、コンソールに出力しています。

HTML

<div id="test_1" class="sample">ダミーテキスト1</div>

jQuery

$(function(){
    $("#test_1").attr("id","test_x");
    var test = $("div").attr("id");
    console.log("結果:「" + test + "」");
});

プレビュー

結果:「test_x」

idを削除する方法

HTMLに付与されたidをjQueryで削除する場合は、「removeAttr()」メソッドを使用します。

removeAttrメソッドは下記のように記述します。

removeAttrの書き方

下の例では、

HTML

<div id="test_1" class="sample">ダミーテキスト1</div>

jQuery

$(function(){
    $("div").removeAttr("id");
    var test = $("div").attr("id");
    console.log("結果:「" + test + "」");
});

プレビュー

結果:「undifined」

まとめ

idの取得変更などの操作は、ユーザーのアクションに応じてCSSのスタイルを変更したい場合に活用されます。また、jQueryではattrメソッドを使って取得したidを使って、特定のid名の時だけ処理を分けるといった条件分岐にも利用されます。

広告
広告

関連する記事

サムネイル

JSでビデオやピクチャが現在どのソース要素を表示しているか取……

2024年11月07日
表示中のsource要素のファイルパスをJSで取得したい picture要素(video)要素とsource要素を使って画像(動画)を表示させている時に、Jav […]
サムネイル

JSで入力値が英数字や半角かどうか即時文字チェックする【ma……

2024年10月02日
JavaScriptのmatch()は、正規表現を使って対象の文字列の中に一致するものがあるか検索できるメソッドです。このページではテキストボックスに入力された文字が数字や半角かどうかチェックする機能をmatchメソッドを使って実装する方法ついてご紹介します。
サムネイル

JSでHTMLのデータ属性を取得・更新する方法【datase……

2024年10月02日
JavaScriptのdatasetで要素のdata属性を操作する JavaScriptのdatasetは、HTML要素に設定されたデータ属性(data-*** […]
サムネイル

JavaScriptでラジオボタンの値(value)を取得す……

2024年10月02日
JSでラジオボタンの値を取得・操作する JavaScriptによるラジオボタンの操作(値の取得やチェックの切り替え)の方法を備忘録として残しておきます。 JSで […]
サムネイル

JSで大文字から小文字(小文字から大文字)へ変換する方法

2024年10月02日
JavaScriptで大文字と小文字を変換する JavaScriptを使った文字検索フォームを作るにあたり、大文字小文字どちらで入力されても良いよう、変換処理を […]
サムネイル

JSのclassList.toggleでクラスの付け外しを行……

2024年09月04日
classList.toggleとは? まず「classList」とは要素のクラス属性の情報を参照するプロパティで、「classList.add()」や「cla […]
サムネイル

JSで要素が特定のクラスを持つか調べる【classList.……

2024年09月04日
JSで要素が特定のクラスを持つか調べるには? JavaScriptで要素が特定のクラスを持つか調べるには「classList.contains」を使います。 「 […]