並んでいるaタグの間にスラッシュを自動で挿入する方法
![JavaScript](https://www.jinmusoftware.com/wp-content/uploads/2023/08/javascript.png)
JavaScriptを使用して、並んでいるaタグの間にスラッシュを挿入します。
目的
aタグを横に並べたときに、適当な記号で区切ったデザインにしたい。
毎回手打ちで入力するのは面倒なので自動で補完したい。
sample
以下HTML
<div>
<a href="https://www.jinmusoftware.com/">Home</a>
<a href="https://www.jinmusoftware.com/blog/">Blog</a>
<a href="https://www.jinmusoftware.com/about/">About</a>
</div>
結論と方法
JavaScriptを使用してaタグ間に記号を挿入します。
CSSでは解決できませんでした。
HTML
<p class="addslash">
<a href="aaa">aaa</a>
<a href="aaa">bbb</a>
<a href="aaa">ccc</a>
</p>
ラッパーな要素に「addslash」クラスを付加する。あとからJavaScriptでこれを走査します。
JavaScriptのコード
let sla_tags = document.querySelectorAll('.addslash');
for (const sla_tag of sla_tags) {
let sub_tags = sla_tag.querySelectorAll('a');
for (let i = 0; i < sub_tags.length - 1; i++) {
sub_tags[i].after(" / ");
}
}
並んでいるaタグの後ろに「 / 」を挿入します。一番最後のaタグに後ろには挿入しません。
テスト・確認
以下区切の記号が挿入されていることを確認できますね。