jQueryセレクターマスターへの道：ID属性の使いこなし

2024-04-02

jQueryセレクター：IDは？で終わります

jQueryセレクターは、HTML文書内の特定の要素を選択するために使用されます。このチュートリアルでは、ID属性の値が特定の文字列で終わる要素を選択する**「IDは？で終わります」**セレクターについて解説します。

<div id="header">ヘッダー</div>
<div id="main-content">メインコンテンツ</div>
<div id="footer">フッター</div>

// ID属性の値が"er"で終わる要素を選択
$( "#footer" ).css( "color", "red" );

// ID属性の値が"content"で終わる要素を選択
$( "#main-content" ).css( "background-color", "yellow" );

解説

上記のコードでは、以下の2つのセレクターを使用しています。

#footer: ID属性の値が"footer"と一致する要素を選択します。

IDは？で終わります

上記のセレクターに加えて、ID属性の値が特定の文字列で終わる要素を選択するために、**「IDは？で終わります」**セレクターを使用できます。

構文

$("[id$='?']");

？は、ID属性の値の末尾に一致する文字列に置き換えます。

<div id="header">ヘッダー</div>
<div id="main-content">メインコンテンツ</div>
<div id="footer">フッター</div>

// ID属性の値が"er"で終わる要素を選択
$( "[id$='er']" ).css( "color", "red" );

// 結果：
//   - フッターが赤色で表示されます。

ID属性の値が"content"で終わる要素を選択するには、$("[id$='content']")を使用します。

**「IDは？で終わります」**セレクターは、ID属性の値が特定の文字列で終わる要素を選択する際に役立ちます。他のセレクターと組み合わせて使用することで、より複雑な条件で要素を選択することもできます。

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <title>jQueryセレクター：IDは？で終わります</title>
</head>
<body>
  <div id="header">ヘッダー</div>
  <div id="main-content">メインコンテンツ</div>
  <div id="footer">フッター</div>
  <div id="sidebar">サイドバー</div>
  <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
  <script>
    $(document).ready(function() {
      // ID属性の値が"er"で終わる要素を選択
      $( "[id$='er']" ).css( "color", "red" );

      // ID属性の値が"content"で終わる要素を選択
      $( "[id$='content']" ).css( "background-color", "yellow" );

      // ID属性の値に"bar"を含む要素を選択
      $( "[id*='bar']" ).css( "border", "1px solid blue" );
    });
  </script>
</body>
</html>

説明

上記のコードは以下の動作を行います。

$("[id$='er']" セレクターは、ID属性の値が"er"で終わる要素を選択します。この場合、#footer要素が選択されます。

実行結果

上記のコードを実行すると、以下のようになります。

フッターが赤色で表示されます。
メインコンテンツが黄色い背景色で表示されます。
サイドバーに1px幅の青い枠線が表示されます。

ID属性の値で要素を選択するその他の方法

document.getElementById()

// ID属性の値が"footer"の要素を取得
var footerElement = document.getElementById("footer");

// 要素のスタイルを変更
footerElement.style.color = "red";

document.getElementById() メソッドは、ID属性の値を指定することで、そのIDを持つ要素を取得します。

Element.querySelector()

// ID属性の値が"main-content"の要素を取得
var mainContentElement = document.querySelector("#main-content");

// 要素のスタイルを変更
mainContentElement.style.backgroundColor = "yellow";

Element.querySelector() メソッドは、CSSセレクターを指定することで、要素を取得します。上記の例では、#main-contentセレクターを使用して、ID属性の値が"main-content"の要素を取得しています。

Element.querySelectorAll()

// ID属性の値が"er"で終わる要素を取得
var elements = document.querySelectorAll("[id$='er']");

// すべての要素のスタイルを変更
for (var i = 0; i < elements.length; i++) {
  elements[i].style.color = "red";
}

少数の要素を選択する場合は、document.getElementById() メソッドが最も簡単です。
より複雑な条件で要素を選択する場合は、Element.querySelector() メソッドまたは Element.querySelectorAll() メソッドを使用する必要があります。

jquery jquery-selectors