1
Help us understand the problem. What are the problem?

posted at

【jQuery】子要素から親要素を指定&同一class名を持つ要素を個別に書き換える

こんにちは。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'));
      
    });

  });

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

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

Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
Sign upLogin
1
Help us understand the problem. What are the problem?