[jQuery]ページ内に○○があったら××するの仕組み

前の内容の骨子。

前の内容
作例
活用シーン

前の内容

ページ内に特定classが付いてたら発火するっていうのを作った。

単純にclassを指定して動作を付ける内容だと1回（1個）の処理で終わってしまうので、複数箇所で発火するっていうのをやっていく必要がある。それは.each()で仕込む。

作例

こういうのがあったとして。

<div class="parent">
    <div class="child_A"></div>
    <div class="child_B"></div>
</div>
<div class="parent">
    <div class="child_A"></div>
    <div class="child_B"></div>
</div>
<div class="parent">
    <div class="child_A"></div>
    <div class="child_B"></div>
</div>
<div class="parent">
    <div class="child_A"></div>
    <div class="child_B"></div>
</div>
<div class="parent">
    <div class="child_A"></div>
    <div class="child_B"></div>
</div>

「すべての.child_Aを.child_Bの後ろに移動する」内容を組むとこうなる。

$(function(){
    $('.child_A').each(function(){
        $(this).insertAfter($(this).next('.child_B'));
    })
});

PC/SPで切り替えるとこうなる。

$(function(){
    $(window).on('load resize', function(){
        if(window.matchMedia('(max-width:767.98px)').matches){
            $('.child_A').each(function(){
                $(this).insertAfter($(this).next('.child_B'));
            })
        }else{
            $('.child_A').each(function(){
                $(this).insertBefore($(this).prev('.child_B'));
            })
        }
    })
})

活用シーン

ページ全体に掛かる装飾もそうなんだけど、それこそ並びを変えたいけど入れ子が足りないとかhtmlをいじったらcssに関わってデザインが崩れるから面倒が増えるとか、そういう時に。