【JavaScript/jQuery】classの前方一致、後方一致

Contents

1. name属性とかclass名で処理を分けたい
2. 参照

name属性とかclass名で処理を分けたい

ブログでも登録フォームでも良いが、同じページ内で同じ処理を行う場合がある。
複数あるtooltipをクリックする。タブやメニューを切り替えたい。次へとか送信ボタンとか同じ挙動させたい等々。
その場合に、class名を揃えてやって連番で分けたり、処理が同じであれば、便宜上似たようなclass名を付けたりするが、同じnameがあるのならば、まとめて記述してやって、コードをシンプルにできる。

//前方一致
$("[class^='modal_']").fadeIn();//特定の名前で始まるclass名に対して処理
//後方一致
$("[class$='_modal']").fadeIn();//特定の文字で終わるclass名に対して処理
//その他
$("[class*='modal']").fadeIn();//特定の文字を含むclass名に対して処理(部分一致)

class名の前方一致、後方一致をやったが、実際はname属性を使っているのを目にする。

//name属性で
<input name="example0" type="text">
<input name="example1" type="text">
<input name="example2" type="text">

<div name=”a_example”>example0</div>
<div name=”b_example”>example1</div>
<div name=”c_example”>example2</div>

これをこんな感じにする。

$("input[name^='example']").val();
$("div[name$='example']").val();

コード的にはシンプルだが、速度的な面でclassセレクタの方が推奨されている。

However it will be slower than using a class selector so leverage classes, if you can, to group like elements.(ただし、クラスセレクタを使用するよりも時間がかかる)
Attribute Starts With Selector [name^=”value”] より

例えば、各々にclassを適用。

<input name="example0" type="text" class="example">
<input name="example1" type="text" class="example">
<input name="example2" type="text" class="example">

$(".example").val();

別にclassセレクタを使っているから、その上で、class名ごとに処理を分けたい場合に使い分ければ良い気がする。

//前方一致
$("[class^='modal_']").fadeIn();//特定の名前で始まるclass名に対して処理
//後方一致
$("[class$='_modal']").fadeIn();//特定の文字で終わるclass名に対して処理
//その他
$("[class*='modal']").fadeIn();//特定の文字を含むclass名に対して処理(部分一致)