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名を付与します。
