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

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

投稿日:

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

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

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名の時だけ処理を分けるといった条件分岐にも利用されます。

関連する記事

サムネイル

Javascriptのlightboxライブラリの使い方【画……

2023年10月01日
最終更新日:2023年09月12日
lightboxライブラリでできること Webサイトでは、ユーザーがクリックすると大きい画像が開くという表示方法が良く用いられます。 一覧では小さい画像を並べて […]
サムネイル

HTMLのチェックボックスに選択上限を設ける方法【Javas……

2023年10月01日
最終更新日:2023年09月28日
チェックボックスに選択上限を設けるには、JavaScriptを使ってチェックの数をカウントし設定した数を超えたらチェックできないようにします。
サムネイル

横スクロール可能なことを示すヒントを表示するJavascri……

2023年09月01日
Javascriptのライブラリ「ScrollHint(スクロールヒント)」を使えば、ユーザーに対して要素がスクロール可能であることをわかりやすく示すアイコンを表示することができます。
サムネイル

JavascriptでブラウザやOSを判定する方法【plat……

2023年09月01日
Javascriptのplatform.jsというライブラリを利用すれば、簡単にユーザーが使用しているブラウザやOS情報を取得し判別する処理を作ることが可能です。
サムネイル

Javascriptでフォーム送信時に確認ダイアログを出す方……

2023年09月01日
Javascriptでフォーム送信時にダイアログ表示させてユーザーに処理を続行して良いか確認するには「confirmメソッド」と「onsubmit属性」の2つを使用します。
サムネイル

Javascriptで文字のUnicode(UTF-16)を……

2023年09月01日
最終更新日:2023年08月29日
JavascriptのcharCodeAtを使うと、日本語(テキスト)のUnicode(UTF-16)を取得したり、Unicode(UTF-16)をテキストに変換することが可能です。
サムネイル

jQueryのblurでフォーカスが外れた時の処理を行う方法……

2023年05月01日
最終更新日:2023年05月31日
jQueryのblur()メソッドはフォームの入力ボックスなどでフォーカスが外れたときに処理を実行させることができるメソッドです。