こんにちは。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'));
});
});
//ライトボックスとスライダーのプラグイン用コードを以下に書き込む（省略）
});
案件が来るたびに「あー、この間やったあれと同じだ」と思うのだけど、いざ作業を始めると何をどうやったのか思い出せない鳥頭なので、備忘録はとても大事。