【js】特定のclassを持つ要素をアンカーリンクで囲む

モーダルを使うサイトで特定のclassを持つ要素をaタグで囲んで、クリックしたらモーダルが開くようにしたときの備忘録

特定のclassを持つ要素をアンカーリンクで囲む

モーダルは「FancyBox3」を使用

HTMLコード

<div class="modal_id-1">ボタン1</div>
<div class="modal_id-2">ボタン2</div>
<div class="modal_id-3">ボタン3</div>

<div style="display: none;" id="modal_id-1">
  <p>モーダル1</p>
</div>

<div style="display: none;" id="modal_id-2">
  <p>モーダル2</p>
</div>

<div style="display: none;" id="modal_id-3">
  <p>モーダル3</p>
</div>

jsコード

<script>
jQuery(function($){
  $(function(){
    // 特定のclassのついた要素を拾う
    var modal = $("body").find("div[class*='modal_id-']");
    // 要素があるか確認
    if (modal.length) {
      // 特定のclassの値を全部eachメソッドで回す
      modal.each(function() {
        // 拾ったclassの中から特定のclassを取得
        var modal_id = $(this).attr('class').match(/modal_id-[0-9]+/)[0];
        // hrefに取得したclassをセットしたアンカーリンクで要素を囲む
        $(this).wrapInner( '<a data-fancybox data-type="inline" href="#' + modal_id + '"></a>' );
      });
    }
  });
});
</script>

.match()メソッドが配列で返すので配列の中から取得したいものを.match()[0]で指定してる