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

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

投稿日:

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

関連する記事

サムネイル

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

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

jQueryのinArray()で配列内を検索する方法【要素……

2023年05月01日
最終更新日:2023年05月31日
jQueryのinArrayメソッドは、配列の中に特定の要素が含まれているかどうかを検索することができるメソッドです。
サムネイル

JavascriptのindexOfで文字列を検索する方法【……

2023年05月01日
最終更新日:2023年05月31日
indexOfメソッドを使用すると、テキストや配列の中に指定の文字列が含まれているかどうかを検索することができます。条件分岐に利用することで、ある文字が含まれている時といない時とで処理を分けることが可能になります。
サムネイル

jQueryのclosest()で最も近い親要素を取得する方……

2023年05月01日
最終更新日:2023年04月17日
jQueryのclosest()は、要素から最も近い親要素を取得(指定)できるメソッドです。要素の親要素を辿っていき、該当するセレクターを持つものを見つけ出してくれます。
サムネイル

jQueryのprop()メソッドで属性値を取得・設定する方……

2023年04月04日
prop()は要素の属性値を取得したり、追加・変更することができるメソッドです。attrメソッドとの違いには「返り値が異なる」といった点があります。
サムネイル

jQueryでラジオボタンの値を取得や操作する方法【チェック……

2023年04月04日
jQueryを使えばHTMLのラジオボタンでユーザーが選択した(チェックされた)値を取得・操作することができます。propメソッドを使用して行います。
サムネイル

jQueryでaタグのhref(リンク先)を書き換える方法【……

2023年04月04日
最終更新日:2023年05月31日
aタグのhref(リンク先のURL)を書き換えたい場合は、attrメソッドを使用します。リンク先のURLの一部だけを書き換えたい時は、replaceメソッドで文字の置き換えを実行してからattrメソッドで書き換えるという方法になります。