jQueryのid取得でつまずかない7つの方法！エラー解決のコツも解説

シンプルに見える要素取得でも、実はDOMの構造や読み込みタイミングなど、考慮すべき要素がたくさんあります。

本記事では、jQueryでid取得の方法や上手く取得できないときの対処法まで丁寧に解説します。

jQueryでidを取得する7つの方法

jQueryのidを取得する方法を以下の目的別で紹介します。

• 基本的なidセレクタからの取得
• id属性の値（文字列）を取得
• クリックされた要素のidを取得
• 特定のクラス名からidを取得
• 複数の要素からidを取得
• 親要素から子要素のidを取得
• 兄弟要素からidを取得

気になる項目からチェックしてみてください。

基本的なidセレクタからの取得

jQueryで特定のidを持つ要素を取得するには、$()セレクタを使うのが一般的です。

$()の中に「#」と「id名」を組み合わせた文字列を指定します。

たとえば、id=”myElement”の要素の取得を見てみましょう。

コピー<div id="myElement">サンプル要素</div>

コピーlet element = jQuery('#myElement');
console.log(element); // jQueryオブジェクトが出力される

// 取得した要素にクラスを追加＆内容を変更
jQuery('#myElement').addClass('highlight').html('内容を更新しました');

jQuery(“#myElement”)の#はidセレクタを表します。

#に続けて取得したい要素のid名（ここではmyElement）を記述します。

取得した要素はjQueryオブジェクトとして返されるため、.addClass()や.html()などのjQueryメソッドを引き続き使用できます。

id属性の値（文字列）を取得

jQueryのattr()を使用すると、要素のid属性の値（文字列）が取得できます。

以下のように、id=”myElement” の要素のid属性値を取得に.attr(“id”)と記述しましょう。

コピー<div id="myElement"></div>

コピーjQuery(document).ready(function(){
const elementId = jQuery("#myElement").attr("id");
console.log(elementId); // "myElement" が出力される
});

jQuery(“#myElement”)は、idが”myElement”の要素を、jQueryで操作可能なオブジェクトとして取得します。

このオブジェクトを使うと、要素の見た目を変えたり、動きをつけたりできます。

.attr(“id”)は、その要素のid名（”myElement”という文字列）だけを取り出すため、あとでid名だけを使って比較などの処理をしたい場合に便利です。

クリックされた要素のidを取得

jQueryでクリックされた要素のidを取得するには、jQuery(this) を使います。

jQuery(this)は、クリックされた要素そのものを指します。

コピー<button id="button1">ボタン1</button>
<button id="button2" class="myButton">ボタン2</button>
<button class="myButton">ボタン3</button>

コピーjQuery(document).ready(function(){
jQuery("button[id]").click(function() {
const clickedId = jQuery(this).attr("id");
console.log("クリックされたボタンのid: " + clickedId);
});
});

上記の例では、jQuery(“button[id]”)でid属性を持つ全てのボタンを選択し、.click()でボタンがクリックされたときの実行処理を登録しています。

クリックされると、jQuery(this).attr(“id”)でクリックされたボタンのidが取得され、コンソールに出力されます。

クラス名など、id属性以外で要素を特定している場合も同様です。

たとえば、class=”myButton”を持つボタンがクリックされたときに、そのidを取得する場合は以下のように記述します。

コピーjQuery(document).ready(function() {
jQuery(".myButton").click(function() {
const clickedId = jQuery(this).attr("id");
console.log("クリックされたボタンのid:" + clickedId);
});
});

このように、.click()の中のfunction() { … }の部分でjQuery(this)を使うのが、クリックされた要素のidを取得する基本的な方法です。

特定のクラス名からidを取得

特定のクラス名を持つ要素のidを取得したい場合は、クラスセレクタとattr()を組み合わせましょう。

たとえば、class=”myClass”を持つ要素のidを取得するには、$(“.myClass”).attr(“id”)のように記述します。

コピーjQuery(document).ready(function(){
const id = jQuery(".myClass").attr("id");
console.log(id);
});

ただし、同じクラス名を持つ要素が複数存在する場合は、最初に一致した要素のidのみが返されることに注意が必要です。

複数の要素からidを取得

同じクラス名を持つ複数の要素のidを全て取得したい場合は、.each() を使用します。

それぞれの要素に対して処理を繰り返しましょう。

コピー<div class="myClass" id="id1"></div>
<div class="myClass" id="id2"></div>
<div class="myClass" id="id3"></div>

コピー// myClass クラスを持つ要素のidを全て取得
jQuery(document).ready(function(){
const ids = [];
jQuery(".myClass").each(function() {
ids.push(jQuery(this).attr("id"));
});
console.log(ids); // ["id1", "id2", "id3"] が出力される
});

jQuery(“.myClass”)でmyClassクラスを持つ全ての要素を取得し、.each()でそれぞれの要素に対して処理します。

jQuery(this)は現在処理中の要素を指しており、jQuery(this).attr(“id”)で現在の要素のidを取得し、ids配列に追加してids配列には全てのidが格納されます。

親要素から子要素のidを取得

親要素から特定のidを持つ子要素を取得するには、find()を使用すると便利です。

コピー<ul id="myList">
<li>リスト項目1</li>
<li id="item2">リスト項目2</li>
<li>リスト項目3</li>
</ul>

たとえば、上記のHTMLで、id=”myList”の<ul>要素の中から、id=”item2″を持つ<li>要素を取得する場合は以下のように記述します。

コピーjQuery(document).ready(function(){
const targetElement = jQuery("#myList").find("#item2");
console.log(targetElement.attr("id")); // "item2" が出力される
});

jQuery(“#myList”)で親要素の<ul>要素を取得し、.find(“#item2”)で、その中からid=”item2″を持つ子要素（<li>要素）を取得しています。

兄弟要素からidを取得

jQueryで特定の要素の兄弟要素のidを取得するには、siblings()、next()、prev()などを利用します。

コピー<ul>
<li id="item1">リスト1</li>
<li id="item2" class="target">リスト2</li>
<li id="item3">リスト3</li>
</ul>

たとえば、上記のHTMLで、class=”target” を持つ要素の兄弟要素全てのidを取得するには、以下のようにします。

コピーjQuery(document).ready(function(){
const siblingIds = jQuery(".target").siblings().map(function() {
return jQuery(this).attr("id");
}).get();

console.log(siblingIds); // ["item1", "item3"] が出力される
});

特定の兄弟要素を取得したい場合には、.next()（次の兄弟要素）や.prev()（前の兄弟要素）が便利です。

コピーjQuery(document).ready(function(){
const nextId = jQuery(".target").next().attr("id"); // "item3"
console.log(nextId);
});

// class="target"の前の要素のidを取得
jQuery(document).ready(function(){
const prevId = jQuery(".target").prev().attr("id"); // "item1"
console.log(prevId);
});

これらを使い分けると、柔軟に兄弟要素のid取得ができます。

jQueryのid取得が上手くできない原因と解決策

jQueryのid取得ができないときの原因と確認項目、解決策を表にまとめました。

jQueryでidが取得できないときは、上記の表で原因を特定し、解決を試みてください。

jQueryでidを追加・変更・削除する方法

ここではjQueryのidの追加と変更、削除方法を紹介します。

• idを追加する
• idを変更する
• idを削除する

必要な操作方法から、ぜひ試してみてください。

idを追加する

要素にidを追加するには、attr()を使用します。

コピー<div class="target"></div>
<p>段落1</p>
<p class="target">段落2</p>

たとえば、上記のHTMLで、クラス名にtargetを持つ最初の<div>要素にid名にnewIdを追加したい場合、以下のように記述します。

コピーjQuery(document).ready(function(){
jQuery("div.target:first").attr("id", "newId");
});

jQuery(“div.target:first”)はclass=”target”を持つ最初の<div>要素を選択し、.attr(“id”, “newId”)で選択した要素にid=”newId”を追加します。

全ての<p>要素にidを追加したいときは、以下のように記述します。

コピーjQuery(document).ready(function(){
jQuery(".target").each(function(index) {
jQuery(this).attr("id", "paragraph-" + index);
});
});

それぞれの要素に異なるidを付与することもできます。

idを変更する

要素のidを変更するときも追加と同じく、attr()を使用します。

コピー<button id="btn-original">元のボタン</button>

たとえば、上記のHTMLで、id=”btn-original”を持つボタンのidをid=”btn-updated”に変更するには、以下のように記述します。

コピーjQuery(document).ready(function(){
jQuery("#btn-original").attr("id", "btn-updated");
});

jQuery(“#btn-original”)でid=”btn-original”を持つ要素を検索し、.attr(“id”, “btn-updated”)でそのidをbtn-updatedに変更しています。

idの変更は要素の特定方法を変えることになるため、その後の処理に影響を与える可能性があるため注意が必要です。

id変更前にクリックイベントを紐づけていた場合を見てみましょう。

コピー// id変更前に、id="btn-original"に紐づけられていたイベント
jQuery(document).ready(function(){
jQuery("#btn-original").on("click", function() {
alert("元のボタンがクリックされました");
});

// idを"btn-updated"に変更
jQuery("#btn-original").attr("id", "btn-updated");
});

上記の時点では、jQuery(“#btn-original”)で要素の取得ができなくなります。

また、idの変更前に紐づけしていたイベントも動作しなくなります。

id変更の前には、他に影響がないか確認することが大切です。

idを削除する

idを削除するには、removeAttr()を使用します。

コピー<div id="targetElement" class="container">
<p>この要素のidを削除します</p>
</div>

たとえば、上記のHTMLでid=”targetElement”を持つ<div>要素からid属性を削除するには、以下のように記述します。

コピーjQuery(document).ready(function(){
jQuery("#targetElement").removeAttr("id");
});

jQuery(“#targetElement”)でid=”targetElement”を持つ要素を検索し、.removeAttr(“id”) でそのid属性を完全に削除します。

idを削除すると、その要素はidセレクタ(#targetElementのような)では選択できなくなります。

idを削除するには、attr(“id”, “”)のようにid属性に空文字を設定する方法もありますが、removeAttr(“id”)を使うのがおすすめです。

removeAttr(“id”) を使うと、id属性そのものがHTMLから完全に削除されるため、HTMLコードがより整理されて、見やすくなります。

まとめ：効率よくjQueryでidを取得しよう

jQueryでidを取得するときは、基本のidセレクタやattr()の活用から、クリック要素・兄弟・親子構造などさまざまな手法を組み合わせると、効率的に要素を特定できます。

id取得ができない場合はスペルや読み込み順などを一つずつ確認し、適切に対処していきましょう。

現場では、実装や保守の際にも柔軟に操作できるjQueryの知識が必須です。

これらを体系的にマスターしたい方は、実践的なカリキュラムで学べるデイトラWeb制作コースをチェックしてみてください。

未経験からコーディングを学ぶならデイトラWeb制作コースがおすすめ！

デイトラWeb制作コースは、実務レベルの本格スキルを学び、Web制作を仕事にしたい方におすすめのコースです。

HTML/CSSやjavaScriptの言語の基本はもちろん、デザインカンプからのコーディング、WordPressのオリジナルテーマ作成までカリキュラムに含まれています。

さらに、中級・上級の最終課題はメンターによる課題レビューがあります。現場目線の品質チェックが受けられるため、大幅なスキルアップが期待できるでしょう。

Web制作のスキルを身につけたい方は、ぜひデイトラWeb制作コースをチェックしてみてください！