jQuery小技メモ

jQuery使っていて、メモしておきたくなった小技。

項目の順番を入れ替える

『.image-box』のすぐ下に『.to_move』を移動したい。
下記様に同じHTMLが繰り返し存在する。
それら全てにおいて、場所移動をしたい、とする。

<div class="post-content">
  <div class="before-box">
    <div class="image-box">
      <img src="image.jpg" width="100%" alt="イメージ画像">
      <div class="image-box-text">
        <h3>キャッチコピー</h3>
        <p>なんやかんや</p>
      </div>
    </div>
    
    <p>うんたらかんたら１</p>
    <p>うんたらかんたら２</p>
  </div>
  
  <div class="to_move">移動対象</div>  
</div>

そんな場合は、jsでこう指定する。

<script>
(function($){
  $('.image-box').each(function(){
    pl = $(this).parent().parent().find('.to_move');
    $(this).append(pl);
  });
})($);
</script>

他のScript実行後に処理したい

『.when(){}.done(){}』が使えれば問題ないのだけど、何でも挟めるわけではない。
そんなときは1秒後に実行させておけば、、まぁ、何とかなる。
下記は1秒後にstyleを全て削除している。

  setTimeout(function(){
    $('.cm div.inner div div').removeAttr('style');
  },1000);