jQueryでIDを指定する方法まとめ|取得・書き換え・変数代入・存在チェックまで実例付きで解説

2025年3月23日

「jQueryでID指定したいけど書き方がわからない」「要素の中身を取得したり書き換えたりするにはどうするの？」──そんな悩みを持つ初心者・初級者の方に向けて、本記事ではjQueryでIDを指定して操作する基本的な方法を、具体的なコード例を交えてわかりやすく解説します。

基本的な取得や書き換え、変数への代入、前方一致やclassとの同時指定、存在チェック、さらには動的なIDの追加まで、幅広く網羅しています。

jQueryでIDを指定する基本構文（セレクタの基本）

jQueryでは、HTML要素のIDを指定するには**「#ID名」**という形式で記述します。

$('#sample-id')

これは、HTML内の以下のような要素にマッチします：

<div id="sample-id">こんにちは</div>

このように、IDはHTML内で一意（ユニーク）である必要があるため、複数指定する用途には向きません。

jQueryでID指定した要素を取得する方法（jquery id指定取得）

テキストを取得する

var text = $('#sample-id').text();
console.log(text); // こんにちは

入力値（value）を取得する（jQuery id=text 取得）

<input type="text" id="input-id" value="テスト">

var val = $('#input-id').val();
console.log(val); // テスト

属性値（attr）を取得する

var href = $('#link-id').attr('href');

jQueryでIDを指定して値を書き換える方法（jQuery id 指定書き換え）

テキストを書き換える

$('#sample-id').text('書き換えました');

HTMLを書き換える

$('#sample-id').html('<strong>強調</strong>');

入力値を変更する

$('#input-id').val('新しい値');

jQueryでIDを変数に代入して再利用する（jquery id指定変数）

同じIDを何度も使う場合は、変数に一度代入するとコードがスッキリします。

var $target = $('#sample-id');
$target.text('こんにちは');
$target.css('color', 'red');

※ jQueryオブジェクトは $変数名 とするのが一般的な記法です。

jQueryでIDが存在するかチェックする方法（jquery id 存在チェック）

方法1：lengthを使う

if ($('#sample-id').length) {
  console.log('存在します');
} else {
  console.log('存在しません');
}

方法2：is()を使う

if ($('#sample-id').is('*')) {
  // 存在する
}

jQueryでIDに前方一致する要素を指定する（jquery id 前方一致）

jQueryのIDセレクタは通常「完全一致」ですが、属性セレクタを使うことで「前方一致」も可能です。

$('[id^="prefix-"]').css('color', 'blue');

上記コードは、id="prefix-abc" や id="prefix-123" のように、prefix-から始まるIDにマッチします。

jQueryでIDとclassを同時に指定する方法（jquery id class 同時指定）

IDとclassの両方を指定して、条件に一致する要素だけを操作することも可能です。

$('#sample-id.sample-class').css('background', 'yellow');

※ セレクタの間にスペースを入れない点に注意しましょう。

jQueryで要素にIDを追加する方法（jQuery id 追加）

動的に生成した要素や既存の要素にIDを付けたいときは、.attr()を使います。

$('.item').eq(0).attr('id', 'new-id');

もしくは、.prop()でも可：

$('.item').eq(0).prop('id', 'new-id');

よくあるエラーと対処法

Q. IDを指定しても値が取れない

ページ読み込み完了前に処理していませんか？

$(document).ready(function() {
  // 安全に処理を行う
});

Q. 同じIDが複数存在するとどうなる？

IDは一意でなければならず、複数あると動作が保証されません。修正推奨です。

Q. `$("#id")` と `document.getElementById("id")` の違いは？

前者はjQueryオブジェクト（チェーン操作可）
後者は純粋なDOMオブジェクト（操作が制限される）

まとめ：jQueryでのID指定は基本から応用まで活用できる

IDセレクタは、jQueryで最も頻繁に使われる基本中の基本です。取得・書き換え・存在チェック・変数化・同時指定・動的追加など、状況に応じて使い分けることで、保守性の高いコードが書けるようになります。

まずは $('#id') から始め、少しずつ実践の中で応用を効かせていきましょう。

ロロント株式会社では、フロントエンド開発やjQueryを活用した実装サポート、Web制作会社様向けのSEOコンテンツ制作も承っています。開発者向けナレッジを高品質な記事にしたい企業様は、お気軽にご相談ください。