セレクタによる複数選択から個々の要素を操作する

著者:杉浦

セレクタによる複数選択から個々の要素を操作する

 ここで扱うセレクタは複数の要素を選択できるjQueryの$()とjavascript備え付けのquerySelectorAllの二つです。$([“属性名=’value'”]),querySelectorAll([“属性名^=’value'”])で条件式に合った要素が返ってきます。このvalueの中で正規表現が使えます。比較演算子は次の表です。

|= valueか、-valueが属性名な要素を選択
*= 部分一致。valueを含む文字列が属性名な要素を選択
~= スペースで区切られた複数の属性名を持つ要素が主な対象。valueな属性名を含む要素を選択。
$= 後方一致。末尾にvalueを含む文字列が属性名な要素を選択
= 完全一致。valueが属性名な要素を選択
!= 否定。valueでない文字列が属性名な要素を選択。属性名がない要素も選択。
^= 前方一致。先頭にvalueを含む文字列が属性名な要素を選択

querySelectorAllの返り値はNodelist型のため配列に変換しないと煩雑です。変換には次のコードが使えます。

Array.prototype.slice.call(document.querySelectorAll("属性名=value"))

次のようなArray.from()ならさらに楽です。

Array.from(document.querySelectorAll("属性名=value"))

Array.from()はこれを書いている時点でブラウザによる対応が怪しいです。対応表は次になります。Can I useも次の対応表へ案内してくれます。
ECMAScript 6 compatibility table
well-known symbolsの行が完全対応なら大丈夫なはずです。Array.fromが使えないなら上のArray.prototype.slice.callです。
 配列を

arr.forEach(funcion(a){/*処理*/});

なコードの様に扱うと処理が短く色々書けます。jQueryのイベント付与処理なら$(“#”+a.id).click(function(){/*click時処理*/})の様な具合です。
次のコードな正規表現で各文字列の差分を取る(最初の属性選択時の共通部分以外を抜き出す)ことでさらに使う幅が広がります。

a.属性名.replace(/^value/g,”) 前方一致したvalue部分を空にする
a.属性名.replace(/value$/g,”) 後方一致したvalue部分を空にする
a.属性名.replace(/value/g,”) 部分一致したvalue部分を空にする

属性名の命名規則をかっちりしていれば正規表現で楽にコーディングできます。

  • この記事いいね! (0)

著者について

杉浦 administrator