こんにちは。E-kan株式会社の岡田です。

既存ページのABテストのため、外部ツールにjQueryでテストしたい要素を書き込んでページを上書きするという業務をよくやるのですが、この間地味に苦労したので備忘録。
ざっくり必要なところだけ抜き出すとこんな感じです。

変更前html

<section>
  <img class="pic" src="pic01.jpg">
  <div class="child">
    <h2>タイトル01</h2>
    <p>本文01</p>
  </div>
  <ul class="list">
    <li><img src="list01.jpg"></li>
    <li><img src="list02.jpg"></li>
    <li><img src="list03.jpg"></li>
  </ul>
</secton>

<section>
  <img class="pic" src="pic02.jpg">
  <div class="child">
    <h2>タイトル02</h2>
    <p>本文02</p>
  </div>
  <ul class="list">
    <li><img src="list04.jpg"></li>
    <li><img src="list05.jpg"></li>
    <li><img src="list06.jpg"></li>
  </ul>
</secton>

このように、内容はユニークだけど外側の要素は全て同一の構成を、以下の要望通りに書き換える。

• 子要素「child」を持つ親要素にclass名「parent」をつけたい
• 子要素内にいるh2を親要素の直下に移動させたい
• img.picをライトボックス表示にしたい
• ul.listをスライダー表示にしたい

出来上がりは、こう。

変更後html

<section class="parent">
  <h2>タイトル01</h2>
  <a class="lightbox" href="pic01.jpg">
    <i class="icon"></i>
    <img class="pic" src="pic01.jpg">
  </a>
  <div class="child">
    <p>本文01</p>
  </div>
  <ul class="list slider">
    <li><img src="list01.jpg"></li>
    <li><img src="list02.jpg"></li>
    <li><img src="list03.jpg"></li>
  </ul>
</secton>

<section class="parent">
  <h2>タイトル02</h2>
  <a class="lightbox" href="pic02.jpg">
    <i class="icon"></i>
    <img class="pic" src="pic02.jpg">
  </a>
  <div class="child">
    <p>本文02</p>
  </div>
  <ul class="list slider">
    <li><img src="list04.jpg"></li>
    <li><img src="list05.jpg"></li>
    <li><img src="list06.jpg"></li>
  </ul>
</secton>

jQuery

//ライトボックスとカルーセル用の外部jsを読み込む
$.getScript('script.js', function() {

  //ページ内の要素が全て読み込まれてから実行する
  $(window).on('load',function(){
  
    //子要素「child」を持つ親要素にclass名「parent」を付与
    $('div.child').parent('section').addClass('parent');

    //ul.listにスライダー用のclassを付与
    $('ul.list').addClass('slider');

    //ライトボックス用のhtmlを作成
    var lightboxArea = (function () {/*
      <a class="lightbox" href="src">
        <i class="icon"></i>
      </a>
    */}).toString().match(/[^]*\/\*([^]*)\*\/\}$/)[1];
    
    //作ったhtmlを親要素直下配置
    $('section.parent').prepend(lightboxArea);

    //各親要素内の子要素のみを選択する
    $('section.parent').each(function(){
    
      //h2を、自分を内包する親要素内の一番上に移動
      $(this).find('h2').prependTo($(this));

      //画像のsrcを取得して変数に格納
      var src = $(this).find('img.pic').attr('src');

      //格納したsrcをリンク要素のurlに代入
      $(this).find('a.lightbox').attr('href',src);

      //自分を内包する親要素内の、特定のclass名を持つ要素下に移動
      $(this).find('img.pic').insertAfter($(this).find('i.icon'));
      
    });

  });

//ライトボックスとスライダーのプラグイン用コードを以下に書き込む（省略）
  
});

案件が来るたびに「あー、この間やったあれと同じだ」と思うのだけど、いざ作業を始めると何をどうやったのか思い出せない鳥頭なので、備忘録はとても大事。