【jQuery】見出しタグから見出しタグまでの間の要素を取得してdivで囲む

自分の備忘録を見返していて見出しタグ以下の文章を字下げしたほうが読みやすいのでは？と思って調べた時の備忘録

見出しと見出しの間の要素を取得してdivで囲む方法

まずは、メインとなるコード

$(':header').nextUntil(':header').wrapAll('<div></div>');

これで、見出しタグ間の要素をまとめてdivで囲むことができる

$(‘:header’).nextUntil(‘:header’)の部分について

見出しを指定するときに
$('h2').nextUntil('h2')
って感じで書いてもいいんだけど、$(':header')を使うと指定した範囲内の見出しタグ(h1~h6)を取得できるみたい

nextUntil()は指定した要素があるまで兄弟要素を取得することができる

ちょっと騙されたんだけど、nextUntil()って指定した要素がもしなかったらundefinedとかnullを返さないで親要素の終わりまで取得し続けるから条件式で使うときはis()と併用しないと駄目だった

この後使ってるけど、

if(($(':header').nextUntil(':header').next(':header').is(':header'))){…};

nextUntil()は指定した要素までの要素しか取得しないので次にあるであろう見出しタグをis()で判別している

見出しタグ間の要素をdivで囲って字下げするデモ

jQuery(function($){
  $(".entry :header").each(function(){

    var h_tag = this.nodeName.toLowerCase();//タグ名の「h2,h3」の部分取得
    if($(this).nextUntil(h_tag).next(h_tag).is(h_tag)){
      //　同じ見出しタグがある時の処理
      $(this).nextUntil(h_tag).wrapAll('<div class="group"></div>');
    }else{
      //　同じ見出しタグがない時の処理
      if(($(this).nextUntil(h_tag).next(h_tag).is(':header'))){
        //　次以降に見出しタグが存在するときの処理
        $(this).nextUntil(':header').wrapAll('<div class="group"></div>');
      }else{
        //　次以降に見出しタグがない時
        $(this).nextUntil('.last').wrapAll('<div class="group"></div>');
      }
    }
  });
});

デモで<div class="last">を使ってるけど別になくてもいい
でも、
$(this).nextUntil('.last').wrapAll('<div class="group"></div>');
この処理を消すとうまく字下げされない