PPP's Blog

雑コード帳

トップ > JavaScript > 【JS】CMSから渡ってきたリンクを配列に入れ、特定のdivタグ内のaタグに突っ込む

【JS】CMSから渡ってきたリンクを配列に入れ、特定のdivタグ内のaタグに突っ込む

JavaScript

TL,DR

  • CMSの編集画面から設定したページリンクを、JSでaタグに設定していきたい
  • 設定したいaタグは特定のクラスがついたdivタグの中に必ず収まっている
  • CMSから設定したリンクは、全てaタグに設定する（フィルタリングなどは行なわない）
  • 各div内のaタグをなめるためにループする際、ループ用のインデックスとは別にインデックスを準備することで、全リンクをaタグに適用していく

目次

やりたいこと

・CMSから渡ってきたリンク文字列をaタグのhrefに流し込みたい。

以下、背景
現在WebRelease2というCMSを利用して、サイト制作・保守業務を仕事でおこなっている。編集画面中でHTMLを直書きできるようにコンポーネントを作成しており、それを利用してコンテンツを作成する場面が多々ある。ところがそれをおこなうと、WebRelease2で使えるWRリンクをうまく利用することができない。（HTMLのaタグ内に直書きする必要が出てくるので。）

こんなイメージのことをやりたい

図：配列パターン

  • CMSから渡ってきたリンクを格納した配列A
  • 特定のクラスをつけたdiv内にあるaタグを格納した配列B～（CMSで定義したHTMLコンポーネントの数だけ配列が増える）
  • 配列Aの値をまんべんなく、配列B以降のaタグのhrefに挿入したい

実際にやったこと

マークアップはこんな感じ（最初からhrefを設定していることに特に理由は無い。）

<div class="content">
    <ul>
        <li><a href="link1">test1</a></li>
        <li><a href="2">test2</a></li>
    </ul>
</div>
<div class="content">
    <ul>
        <li><a href="5">test5</a></li>
        <li><a href="6">test6</a></li>
    </ul>
</div>

こんなスクリプトを書いた

配列arrにWebRelease2から渡ってきたリンクを格納する想定である。

var links = document.querySelectorAll(".content");
var node = Array.prototype.slice.call(links, 0);

var arr = ["test1", "satoshi", "diff", "clock"];
var num = 0;

node.forEach(function(el, index) {
    var a = node[index].getElementsByTagName("a");
    for(var i = 0; a.length > i; i++) {
        console.log(a[i].getAttribute("href"));
        a[i].href = arr[num];

        // 配列arrのインデックスを次に進めるためにループとは別に変数を繰り上げ
        num++;
    }
});

ちょっと詰まったところ

配列Aの中身をまんべんなく配列B以降に挿入するために、インデックスをもう一つ用意した

コード上でいうと、var arr = ["test1", "satoshi", "diff", "clock"];を、
var a = node[index].getElementsByTagName("a");にa[i].href = arr[num];する部分。

最初はこんな風に書いていたが、、、

node.forEach(function(el, index) {
    let a = node[index].getElementsByTagName("a");
    for(let i = 0; a.length > i; i++) {
        console.log(a[i].getAttribute("href"));
        a[i].href = arr[i];
    }
});

これでは、2つ目以降の配列に、またtest1の値が入ってしまう。
div内aタグの配列が3つあろうが4つあろうが、test1からリンクが当てられることになり、まんべんなくリンクを挿入することができない。

なので、リンクを格納した配列を参照するためのインデックスを別に用意した。

うまくいった。
嬉しい。

※WebRelease2でのリンク取得処理は省いている。というより覚えていないので書いていない。。。

参考にしたURL