jQueryのclass前方一致で詰まった

おさらい

前方一致：[属性名^="値"] 属性値が指定された値で始まる要素を取得
後方一致：[属性名$="値"] 属性値が指定された値で終わる要素を取得
部分一致：[属性名*="値"] 属性値に指定された値が含まれる要素を取得
単語の完全一致：[属性名~="値"] 属性値に指定された値が1単語として含まれる要素を取得

つまった

classのように、複数値を持つ属性の前方一致がうまくいかない。

結論

前方一致させたい値は先頭に配置する。

例

• classで"fuga_"の値で前方一致をさせたい。

var fugacols= $("[class^='fuga']");

//　×取得できない
<span class="hoge_A fuga_1">いち</pan>
<span class="hoge_A fuga_2">に</span>
<span class="piyo_A fuga_3">さん</span>
<span class="piyo_A fuga_4">よん</span>
//　→ fugacols.length:0 

//　〇取得できる
<span class="fuga_1　hoge_A">いち</pan>
<span class="fuga_2　hoge_A">に</span>
<span class="fuga_3　piyo_A">さん</span>
<span class="fuga_4　piyo_A ">よん</span>
//　→ fugacols.length:3 

気が付くまで時間がかかった…常識なのかな？

ちなみに後方一致なら逆に最後に配置すると取得できます。

• classで"_A"の値で後方一致をさせたい。

var lastAcols= $("[class$='_A']");

//　×取得できない
<span class="hoge_A fuga_1">いち</pan>
<span class="hoge_A fuga_2">に</span>
<span class="piyo_A fuga_3">さん</span>
<span class="piyo_A fuga_4">よん</span>
//　→ lastAcols.length:0 

//　〇取得できる
<span class="fuga_1　hoge_A">いち</pan>
<span class="fuga_2　hoge_A">に</span>
<span class="fuga_3　piyo_A">さん</span>
<span class="fuga_4　piyo_A ">よん</span>
//　→ lastAcols.length:3 

部分一致/単語の完全一致なら、配置順序関係なく取得できました。