【jQuery】特定の文字を含むクラス名を指定する方法

jQueryを使うときに途中までクラス名が同じで最後が違う複数の要素に対して処理を行いときがあると思います。

クラス名が違うもの対して一つずつ処理を書くのも面倒だと思います。

そんなときに使いたいのが特定の文字列を含むクラス名の指定する方法です。

特定の文字列を含む要素を指定したい

jQuery("[属性 *= '値']")

まず特定の文字列を含まるときに属性と値の間を（*=）つなぎます。

そうすることで〇〇を含んだ値という指定ができるようになります。

基本の書き方を参考にクラスの指定に行うと下記になります。

jQuery("[class*='abc']").addClass('on');

上はクラス名「abc」を含んだクラスに対して「on」というクラスを追加させる処理になりました。

もし含まれるものが複数あれば一致するすべてに対してクラスを追加することができます。

この方法を使えばまとめて処理をさせることができるので便利ですね。

もし指定した文字列で始まるものに処理をしたい場合は下記になります。

jQuery("[class^='abc']").addClass('on');

（*=）の部分を（^=）に変えることで文字列で始めるものを指定できます。

次は指定した文字列で終わるものに対して処理をしてい場合になります。

jQuery("[class$='abc']").addClass('on');

属性と値の間に（$=）を入れることで指定した文字列で終わるものが指定できます。