【jQuery】要素のid値を取得するにはどうすればいいの？

こんにちは、ハイナレです！

システムを開発していると、要素の id属性 の値を取得したくなるときがありますよね。

たとえば、
・指定要素に文字を表示したいとき
・指定要素を消したいとき
などです。

今回はそんな「id属性の値を取得する方法」を２つほどご紹介したいと思います！

atterかpropを使う

たとえば下のようなspan要素があったとします。

<span id="fuga" class="hoge">ようこそ！</span>

このspan要素の「ようこそ！」という文字を「こんにちは！」変更したい場合は、

$("#fuga").text("こんにちは！");

と書きますよね？

でもプログラムを書いていると”fuga”というidを直接指定できないことがあります。
idが動的に連番で付与されていたりする場合などです。

そんな時、id属性値を取得する方法が２つあります。

//propを使用して取得
var id = $(".hoge").prop("id");

//attrを使用して取得
var id = $(".hoge").attr("id");

これでid属性値を取得することができます。
その後、

$("#" + id).text("こんにちは！");

と書いてあげればspan要素の文字が変更されます。

どちらでもOKです。
なぜならid属性の値を取得する場合に関しては、attrでもpropでも同じ結果が帰ってくるからです。

この2つの使い分けは、例えば要素の“disabled”を判定する際などに必要となってきます。
が、その話はまた別の機会に……

記事をシェアする