.entry{
padding: 30px;
}
.entry .group {
position: relative;
padding-left: 1.5em;
}
.entry .group::before {
background: #000;
content: "";
display: block;
height: 100%;
position: absolute;
top: 0;
left: 0;
width: 1px;
}
h2見出しh2見出し
これはh2見出しテキストです。
これはh2見出しテキストです。
h3見出しh3見出し
これはh3見出しテキストです。
h4見出し h4見出し
これはh4見出しテキストです。
h5見出し h5見出し
これはh5見出しテキストです。
h6見出し h6見出し
これはh6見出しテキストです。
h2見出しh2見出し
これはh2見出しテキストです。
これはh2見出しテキストです。
h3見出しh3見出し
これはh3見出しテキストです。
h2見出しh2見出し
これはh2見出しテキストです。
これはh2見出しテキストです。
h3見出しh3見出し
これはh3見出しテキストです。
お終い
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('');
}else{
// 同じ見出しタグがない時の処理
if(($(this).nextUntil(h_tag).next(h_tag).is(':header'))){
// 次以降に見出しタグが存在するときの処理
$(this).nextUntil(':header').wrapAll('');
}else{
// 次以降に見出しタグがない時
$(this).nextUntil('.last').wrapAll('');
}
}
});
});
【jQuery】見出しタグから見出しタグまでの間の要素を取得してdivで囲む
2020/08/08