今回は以下のような、クラスやIDが付与されていないHTMLから、data属性の特定の値を持つ要素を取得する方法を紹介する。

<li data-model="a">MODEL A</li>
<li data-model="b">MODEL B</li>
<li data-model="c">MODEL C</li>
<li data-model="d">MODEL D</li>
<li data-model="e">MODEL E</li>

以下、jQueryを使ったJSコード。

// data-model="a"の要素を取得する場合
var elem = $('li[data-model="a"]');

上記のように角括弧を使ってdata属性と値を指定すればOK。

次に変数を使った例を見てみよう。

// data-model="a"の要素を取得する場合
var model = "a";
var elem = $('li[data-model="'+model+'"]');

変数を使う場合は+演算子で連結してあげるだけでOK。
これで特定のdata値を持つ要素を取得することができる。