如何将div中前两个相邻标题标签（h1-h6）包裹在容器内？

你需要精准定位前两个相邻的标题元素，而非容器内所有标题。试试这段jQuery代码：

$('.content-with-double-headline').each(function() {
  // 获取当前容器内的第一个标题
  const firstHeading = $(this).find('h1, h2, h3, h4, h5, h6').first();
  if (!firstHeading.length) return; // 无标题则跳过当前容器

  // 检查第一个标题的下一个兄弟是否为标题（确保相邻关系）
  const secondHeading = firstHeading.next('h1, h2, h3, h4, h5, h6');
  
  if (secondHeading.length) {
    // 存在相邻的第二个标题，将两者一起包裹
    firstHeading.add(secondHeading).wrapAll('<div class="any-class"></div>');
  } else {
    // 仅存在一个标题，单独包裹该标题
    firstHeading.wrap('<div class="any-class"></div>');
  }
});

原代码问题分析 #

你之前的代码$('.content-with-double-headline').find('h1,h2,h4,h4,h5,h6').wrapAll('<div></div>')会选中目标容器内所有符合条件的标题元素，无论它们是否相邻。wrapAll方法会把这些选中的元素全部包裹到同一个div中，自然会包含后面不相邻的标题，不符合需求。

代码逻辑说明 #

1. 遍历每个.content-with-double-headline容器，避免批量操作时多个容器互相干扰
2. 先定位容器内的第一个标题，若没有标题则直接跳过当前容器
3. 通过next()方法检查第一个标题的下一个兄弟元素是否为标题，确保两个标题是相邻的
4. 根据是否存在相邻的第二个标题，分别执行批量包裹或单独包裹操作

这段代码处理你提供的示例HTML后，会生成你期望的结构：

<div class="about-content-wrap content-with-double-headline">
   <div class="any-class">
      <h2>Milk &amp; Honey</h2>
      <h4>Taste of Heaven!</h4>
   </div>
   <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor</p>
   <h3>asdasdas</h3>
</div>

内容的提问来源于stack exchange，提问作者Swaranan Singha Barman