【jQuery】特定の文字列が入った要素を指定して処理を行う方法

【jQuery】特定の文字列が入った要素を指定して処理を行う方法

今回は「特定の文字列が入った要素を指定して処理を行う方法」です。

「この文字が入ってる要素だけ、色を変えたい!デザイン変更したい!」という時に使えるものです。

特定の要素にクラス名をつけて、CSS側で変更・・・といった方法もできますが、それだと自分で特定の要素を探してクラス名をつけて、といった作業になって面倒なのでこの方法だと簡単です。

スポンサーリンク

:contains(text)を使って実装できる

実装するためには:contains(text)というメソッドを使うと実装できます。

:contain()の中に指定したい文字列を入れれば要素が指定できるので、書き方も結構簡単ですよ。

例を使って説明したいと思います。

指定した文字列の色を変えたい

例えばこんなリスト一覧があったとして

<ul>
<li>りんご</li>
<li>みかん</li>
<li>いちご</li>
</ul>

「みかんという文字が入ったli要素」という指定を:contains()を使って書くと

li:contains('みかん')

という書き方になります。これを使って実装してみると・・・

See the Pen OOyEbM by tatsuya nakafuji (@handywebdesign) on CodePen.

ちゃんと「みかん」の文字だけ色を変えることができました。containsで要素と文字列を指定すれば、あとは続けて処理内容を書けば実装できます。

指定した文字列の要素を消したい

同様のやり方で処理方法を変えれば色々できますね。

同じリストで今度は「りんご」と入ったli要素を消したい、という時は

See the Pen contains例2 by tatsuya nakafuji (@handywebdesign) on CodePen.

こんな感じで文字列と要素を指定して、remove()を使うと指定した文字列の要素を削除できます。

文字列は一部が含まれていても該当する

ちなみに文字列は全部入れないといけないというわけではなく、一部あてはまっても該当します。

See the Pen contains例3 by tatsuya nakafuji (@handywebdesign) on CodePen.

サンプルのように、「1という数字が入ったh3要素」といった指定方法もできます。使い分けると細かい指定ができそうですね。

というわけで特定の文字列が入った要素を指定して処理を行う方法でした。お役に立てば幸いです!

スポンサーリンク

SNS・feed登録はこちら

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です