JS

ネイティブネタ帳

UI

モーダル

タブ

ドロワー

スライダー

スクロール

アコーディオン

目次

ローディングアニメーション

ツールチップ

ヘッダー

フォーム

フォーム

文字

文字の装飾

文字の操作

文字のカウント

数字の操作

ウィンドウ

ウィンドウ操作

タイトルの操作

ページ遷移時の動き

class

classの操作

要素

要素の操作

要素の追加

API

WP REST API

Google Books APIs

楽天市場API

画像・動画

画像の操作

YouTube

リンク

Google Analytics

cookie

検索

検索

お気に入り登録

JavaScriptの厳密等価演算子 ( === )で指定した文字列を持つタグにclassを付与

お気に入り登録をすると、お気に入り記事一覧に登録することができます。

厳密等価演算子 ( === )

JavaScriptの厳密等価演算子 ( === )で指定した文字列を持つタグにclassを付与

JavaScriptの厳密等価演算子 ( === )で指定した文字列を持つタグにclassを付与

WordPressでも、同じ処理を何回か繰り返したい場面によく使う「ループ」は、JavaScriptでもforなどの構文で、あります。

この記事では、JavaScriptの厳密等価演算子 ( === )と、そんなループを使って文字列と一致するタグにclassを付与する記述を解説していきます。

厳密等価演算子 ( === )

日本語にすると難しく見える用語「厳密等価演算子」ですが、

似たようなものには「等価演算子(==)」があり、この2つには厳密な違いがあったりします。この違いについては以下の記事が分かりやすく参考になるので、気になる方はチェックしてみて下さい。

かかかず
かかかず

厳密には、「文字」と「数値」のようにデータの種類が違う場合、返す値が異なりますね。この記事は === の方を使います。

指定文字列に一致した最初の要素のみclassを付与

まずは、querySelector() を使ってclassを指定して、厳密等価演算子 ( === ) で文字列が一致した場合のコードと表示サンプルについてです。

コードと表示サンプル

HTMLは、3つの li タグに「end」のclass名を付けます。

そして、JavaScriptの querySelector()で 「end」のclass名がつくタグの文字列の一致を見ます。この場合は、一致した最初の要素のみ「listMatch」のclass名を付与します。

<ul class="JavaMatch">
<li class="end">hoge</li>
<li class="end">hoge</li>
<li class="end">hoge</li>
</ul>
<script>
var string  = document.querySelector('.end').innerHTML;
var matchText = 'hoge'; //ここに一致する文字列を記載
if(string === matchText){
  document.querySelector('.end').classList.add('listMatch');
}
</script>
  • hoge
  • hoge
  • hoge
かかかず
かかかず

このように「最初の要素のみ」です。複数要素には対応しないので注意しましょう。

JavaScript

JavaScriptは、querySelector('.end').innerHTML で「end」のclassのある要素の文字列を取得します。次に、var matchText = 'hoge'; で一致する文字列の指定をします。

この2つの宣言でif文を作り、一致した場合の処理内容を記述します。

var string  = document.querySelector('.end').innerHTML;
var matchText = 'hoge'; //ここに一致する文字列を記載
if(string === matchText){
  document.querySelector('.end').classList.add('listMatch');
}

この場合の処理内容は、「end」のclass名を持つタグに.classList.add('listMatch'); で「listMatch」のclass名を最初の要素に1回付与します。

かかかず
かかかず

ここまでの記述は「1回」の処理を行う記述なので注意ください。

ループで回して指定文字列に一致する要素にclassを付与

次に、指定したページ内のclassを全て取得して、一致した要素にclassを新しく付与します。

コードと表示サンプル

HTMLは6つの li タグに「hogeClass」のclass名が付いたシンプルな記述です。

そこにjavascriptで、「hogeClass」のclass名がついているタグの内、「hoge」の文字列が含まれるタグのみ「listMatch」のclass名を付与します。

<ul class="JavaMatch">
<li class="hogeClass">hoge</li>
<li class="hogeClass">hoge</li>
<li class="hogeClass">not-hoge</li>
<li class="hogeClass">hoge</li>
<li class="hogeClass">not-hoge</li>
<li class="hogeClass">HOGE</li>
</ul>
<script>
const hoges = Array.from(document.querySelectorAll('.hogeClass'));
hoges.forEach((el) => {
var string  = el.innerHTML;
var matchText = 'hoge'; //ここに一致する文字列を記載
if(string === matchText){
  el.classList.add('listMatch');
}
});
</script>
  • hoge
  • hoge
  • not-hoge
  • hoge
  • not-hoge
  • HOGE

上記の場合、箇条書きの li タグ1個目・2個目・4個目の3つに指定のclassが付与されて赤文字になります。

かかかず
かかかず

この場合、小文字の「hoge」のみで、大文字の場合や部分一致は対象となりません。

JavaScript

forEach で指定のclassを全て取得して、取得したclassの文字列から一致したものに if でclassを付与します。

const hoges = Array.from(document.querySelectorAll('.hogeClass'));
hoges.forEach((el) => {
var string  = el.innerHTML;
var matchText = 'hoge'; //ここに一致する文字列を記載
if(string === matchText){
  el.classList.add('listMatch');
}
});

「hogeClass」のclass名を持つタグを、.querySelectorAll() で取得して「hoge」の文字列をもつ全てのタグにループを使って「listMatch(赤字にするプロパティを持つclass)」を付与します。

かかかず
かかかず

いわゆるループで回す方法です。Array.fromを使って、配列にしてからforEachをしています。

こうすることで、指定したclass名に一致する全てに任意のclass名を付与します。