jQuery で複数の ID をまとめて選択する方法

jQuery で複数の ID の要素をまとめて選択する方法についてです。

jQuery ではワイルドカード指定はできないため別の方法を使うことになります。 ちなみに Zepto.js でも同じ方法が使えます。

次のように ID に一定のパターンがある複数の要素をまとめて選択したい場合を考えてみましょう。

<div id="header-1">hello</div>
<div id="header-2">world</div>

複数の要素をそのまま並べてもいいのですが、この方法だとあまりきれいではありません。

var $headers = $('#header-1, #header2');

前の部分が固定の場合は以下のような方法で複数選択することができます。

var $headers = $('[id^=header-]');

逆に後ろの部分が固定の場合は次のような感じで。

HTML:

<div id="first-header">hello</div>
<div id="second-header">world</div>

JS:

var $headers = $('[id$=header]');

属性の前方一致/後方一致などの書式を ID に対して使うと OK です。