我的内容由标题(h1、h2、h3、h4、h5、h6)组成。
我需要的:
使用 jQuery,我需要将每个标题后面的所有元素包装起来,直到下一个相同的标题或更高的标题。通过“更高”,我的意思是:
- H5比h6“高”。
- H4 比 h5 和 h6“高”。
- H3 比 h4、h5 和 h6“高”。
……以此类推,以此类推。
例如,在 h3 之后包装所有元素,直到下一个 h3 或更高的标题(h1 或 h2)。
这是所需最终结果的示例:
h1,
h2,
h3,
h4,
h5,
h6 {
font-family: Arial;
color: white;
background-color: black;
margin: 0;
padding: 5px;
}
.h1-section,
.h2-section,
.h3-section,
.h4-section,
.h5-section,
.h6-section {
border: 1px solid black;
border-top: none;
padding: 20px;
}
<h1>1</h1>
<section class="h1-section">
<h2>2</h2>
<section class="h2-section">
<h3>3</h3>
<section class="h3-section">
<h4>4</h4>
<section class="h4-section">
<h5>5</h5>
<section class="h5-section">
<h6>6</h6>
<section class="h6-section">
</section>
</section>
</section>
</section>
</section>
</section>
<h1>1</h1>
<section class="h1-section">
<h2>2</h2>
<section class="h2-section">
<h3>3</h3>
<section class="h3-section">
<h4>4</h4>
<section class="h4-section">
<h5>5</h5>
<section class="h5-section">
<h6>6</h6>
<section class="h6-section">
</section>
<h6>6</h6>
<section class="h6-section">
</section>
</section>
<h5>5</h5>
<section class="h5-section">
<h6>6</h6>
<section class="h6-section">
</section>
<h6>6</h6>
<section class="h6-section">
</section>
</section>
</section>
<h4>4</h4>
<section class="h4-section">
<h5>5</h5>
<section class="h5-section">
<h6>6</h6>
<section class="h6-section">
</section>
<h6>6</h6>
<section class="h6-section">
</section>
</section>
<h5>5</h5>
<section class="h5-section">
<h6>6</h6>
<section class="h6-section">
</section>
<h6>6</h6>
<section class="h6-section">
</section>
</section>
</section>
</section>
<h3>3</h3>
<section class="h3-section">
<h4>4</h4>
<section class="h4-section">
<h5>5</h5>
<section class="h5-section">
<h6>6</h6>
<section class="h6-section">
</section>
<h6>6</h6>
<section class="h6-section">
</section>
</section>
<h5>5</h5>
<section class="h5-section">
<h6>6</h6>
<section class="h6-section">
</section>
<h6>6</h6>
<section class="h6-section">
</section>
</section>
</section>
<h4>4</h4>
<section class="h4-section">
<h5>5</h5>
<section class="h5-section">
<h6>6</h6>
<section class="h6-section">
</section>
<h6>6</h6>
<section class="h6-section">
</section>
</section>
<h5>5</h5>
<section class="h5-section">
<h6>6</h6>
<section class="h6-section">
</section>
<h6>6</h6>
<section class="h6-section">
</section>
</section>
</section>
</section>
</section>
<h2>2</h2>
<section class="h2-section">
<h3>3</h3>
<section class="h3-section">
<h4>4</h4>
<section class="h4-section">
<h5>5</h5>
<section class="h5-section">
<h6>6</h6>
<section class="h6-section">
</section>
<h6>6</h6>
<section class="h6-section">
</section>
</section>
<h5>5</h5>
<section class="h5-section">
<h6>6</h6>
<section class="h6-section">
</section>
<h6>6</h6>
<section class="h6-section">
</section>
</section>
</section>
<h4>4</h4>
<section class="h4-section">
<h5>5</h5>
<section class="h5-section">
<h6>6</h6>
<section class="h6-section">
</section>
<h6>6</h6>
<section class="h6-section">
</section>
</section>
<h5>5</h5>
<section class="h5-section">
<h6>6</h6>
<section class="h6-section">
</section>
<h6>6</h6>
<section class="h6-section">
</section>
</section>
</section>
</section>
<h3>3</h3>
<section class="h3-section">
<h4>4</h4>
<section class="h4-section">
<h5>5</h5>
<section class="h5-section">
<h6>6</h6>
<section class="h6-section">
</section>
<h6>6</h6>
<section class="h6-section">
</section>
</section>
<h5>5</h5>
<section class="h5-section">
<h6>6</h6>
<section class="h6-section">
</section>
<h6>6</h6>
<section class="h6-section">
</section>
</section>
</section>
<h4>4</h4>
<section class="h4-section">
<h5>5</h5>
<section class="h5-section">
<h6>6</h6>
<section class="h6-section">
</section>
<h6>6</h6>
<section class="h6-section">
</section>
</section>
<h5>5</h5>
<section class="h5-section">
<h6>6</h6>
<section class="h6-section">
</section>
<h6>6</h6>
<section class="h6-section">
</section>
</section>
</section>
</section>
</section>
</section>
我试过的:
使用 jQuery,我尝试使用.nextUntil()
,但我错误地选择和包装元素:
$(document).ready(function() {
$("h1").nextUntil("h1").wrapAll("<section class='h1-section'></section>");
$("h2").nextUntil("h1, h2").wrapAll("<section class='h2-section'></section>");
$("h3").nextUntil("h1, h2, h3").wrapAll("<section class='h3-section'></section>");
$("h4").nextUntil("h1, h2, h3, h4").wrapAll("<section class='h4-section'></section>");
$("h5").nextUntil("h1, h2, h3, h4, h5").wrapAll("<section class='h5-section'></section>");
$("h6").nextUntil("h1, h2, h3, h4, h5, h6").wrapAll("<section class='h6-section'></section>");
});
h1,
h2,
h3,
h4,
h5,
h6 {
font-family: Arial;
color: white;
background-color: black;
margin: 0;
padding: 5px;
}
.h1-section,
.h2-section,
.h3-section,
.h4-section,
.h5-section,
.h6-section {
border: 1px solid black;
border-top: none;
padding: 20px;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<h1>1</h1>
<h2>2</h2>
<h3>3</h3>
<h4>4</h4>
<h5>5</h5>
<h6>6</h6>
<h1>1</h1>
<h2>2</h2>
<h3>3</h3>
<h4>4</h4>
<h5>5</h5>
<h6>6</h6>
<h6>6</h6>
<h5>5</h5>
<h6>6</h6>
<h6>6</h6>
<h4>4</h4>
<h5>5</h5>
<h6>6</h6>
<h6>6</h6>
<h5>5</h5>
<h6>6</h6>
<h6>6</h6>
<h3>3</h3>
<h4>4</h4>
<h5>5</h5>
<h6>6</h6>
<h6>6</h6>
<h5>5</h5>
<h6>6</h6>
<h6>6</h6>
<h4>4</h4>
<h5>5</h5>
<h6>6</h6>
<h6>6</h6>
<h5>5</h5>
<h6>6</h6>
<h6>6</h6>
<h2>2</h2>
<h3>3</h3>
<h4>4</h4>
<h5>5</h5>
<h6>6</h6>
<h6>6</h6>
<h5>5</h5>
<h6>6</h6>
<h6>6</h6>
<h4>4</h4>
<h5>5</h5>
<h6>6</h6>
<h6>6</h6>
<h5>5</h5>
<h6>6</h6>
<h6>6</h6>
<h3>3</h3>
<h4>4</h4>
<h5>5</h5>
<h6>6</h6>
<h6>6</h6>
<h5>5</h5>
<h6>6</h6>
<h6>6</h6>
<h4>4</h4>
<h5>5</h5>
<h6>6</h6>
<h6>6</h6>
<h5>5</h5>
<h6>6</h6>
<h6>6</h6>
如何使用 jQuery 实现预期的结果?