jQueryいろいろ(wrapAll, MutationObserverなど)

復習のため、無駄に遊んでみました。

sample.js

// Bootstrap, jQueryは各自読み込んでください。
$(() => {
  const main = $('<div id="main"></div>');
  $('body').html(main);
  const cat = 'https://drive.google.com/uc?export=view&id=1vhfW5iAbMOnkM5nGsYDmEAntikVMWKw4';
  const img_tag = `<div class="img-wrapper" style="text-align: center"><img src="${cat}" style="width: 100px;"></div>`;
  for (let i = 0; i < 6; i++) {
    $('#main').append(`${img_tag}`)
  }
  
  // スリープ
  setTimeout(() => {
    $('.img-wrapper').wrapAll('<div class="container"></div>');
    
  // 3つずつrowで囲む
  do {
    $('#main').children('.container').children('.img-wrapper:lt(3)').wrapAll('<div class="row"></div>')
  } while($('.container').children('.img-wrapper').length)
    
  // .col-4を付与  
  $('#main').find('.img-wrapper').addClass('col-4');
  }, 4000)
  
  // スリープ
  setTimeout(() => {
  
  // タイトルを挿入
  $('#main').prepend('<h2 id="title">猫ですがなにか？</h2>');
  
  // MutationObserverをタイトルにセット
  let observer = new MutationObserver(() => {
    let new_title = "猫アレルギーなんですか？"
    $('#title').text(new_title);
  });
  
  // 属性の変化を検知
  const conf = {
    attributes: true,
    attributesFilter: ['style']
  };
  
  const title = document.getElementById('title');
  observer.observe(title, conf);
  }, 8000)
  
  // スリープ
  setTimeout(() => {
  $('#title').css({'text-align': 'center'});
  
  $('#main').find('.img-wrapper').removeClass('col-4');
  
  $('.img-wrapper').each((index, element) => {
    $(element).wrap('<div class="cat-wrapper col-4"></div>');
  });

  $('.cat-wrapper').append('<p class="neko_text">猫ですが？</p>');
  $('.neko_text').css({'text-align': 'center'})
  }, 12000)
  
  // スリープ
  setTimeout(()=> {
    $('.neko_text').each((index, element) => {
    let text = $(element).text();
    let new_text = text.replace('猫です', '犬じゃないんです');
    $(element).text(new_text);
  });
  }, 16000)
});

/*wrapAll,wrapInner
children,find
$(function() {})　は　$(document).ready(function{})と一緒
do {} while()
length
each(function(index, element) {})
.text(), replace(),
document.getElementById(),$()
MutationObserver
append, prepend
*/