我的内容由标题(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 实现预期的结果?
最佳答案
问题是这样的:
$("h5").nextUntil("h5")
将返回 所有 的 nextUntils,而不仅仅是您期望的 each h5
。即它将获得第一个 h5 的 nextUntils 并将它们与第二个 h5 的 nextUntils 组合,等等然后当你应用 wrapAll 时,它将 wrapAll all 它们,而不是只是个人集。
使用 .text()
来显示的例子
console.log($("h5").nextUntil("h5").length, $("h5").nextUntil("h5").text())
h5,h6 { margin:0; padding:0; }
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<h5></h5><h6>1</h6><h6>2</h6>
<h5></h5><h6>3</h6><h6>4</h6>
所以你需要一次查看每个h5
$("h5").each(function() {
console.log($(this).nextUntil("h5").length, $(this).nextUntil("h5").text())
});
h5,h6 { margin:0; padding:0; }
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<h5></h5><h6>1</h6><h6>2</h6>
<h5></h5><h6>3</h6><h6>4</h6>
然后您可以将 .length
/.text()
替换为您的 .wrapAll()
:
$("h5").each(function() {
$(this).nextUntil("h5").wrapAll("<div class='section-h5'>")
});
$("h6").each(function() {
$(this).nextUntil("h6,h5").wrapAll("<div class='section-h6'>")
});
h5,h6 { margin:0; padding:5px; }
h5 { margin-top:4px; }
h6 { }
.section-h5 { padding: 5px; border:1px solid blue; }
.section-h6 { padding: 5px; border:1px solid green; }
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<h5></h5><h6></h6><div>1</div><h6></h6><div>2</div>
<h5></h5><h6></h6><div>3</div><h6></h6><div>4</div>
(根据需要扩展到其他H级别)
关于javascript - 如何在标题之后包装所有元素直到下一个相同或更高的标题?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/49546722/