使用 JQuery 在多个 HTML 元素中包装一组元素

Question

我需要将 HTML 添加到页面中，但我无法直接控制 HTML 本身，因此我尝试使用 JQuery。

这是现有的、生成的 HTML（简化版）：

<div class="curriculum>Content</div>
<div class="curriculum">Content</div>
<div class="testimonial">Content</div>
<div class="testimonial">Content</div>
<div class="testimonial">Content</div>
<div class="curriculum>Content</div>
<div class="curriculum">Content</div>

无论.testimonials 出现在哪里，我都需要将它们全部分组并用 HTML 包装，因此输出如下所示：

<div class="curriculum>Content</div>
<div class="curriculum">Content</div>

  <div>
    <div>
      <h2>Testimonials</h2>
      <div>

        <div class="testimonial">Content</div>
        <div class="testimonial">Content</div>
        <div class="testimonial">Content</div>

      </div>
    </div>
  </div>       

<div class="testimonial">Content</div>
<div class="curriculum>Content</div>
<div class="curriculum">Content</div> 

请注意，出于样式原因，我需要添加 3 个包含 <div> 的标签和 <h2>（以及相关的结束标签）。

我希望使用.first().before 和.last().after 简单地获取第一个和最后一个推荐以添加HTML，但JQuery 添加了结束标签。我也尝试过使用 JQuery 的各种 .wrapAll、.before、.append，但由于我不明白的原因没有运气！

stackoverflow 上的其他解决方案似乎都处理将一组元素包装在一个 <div> 中，但我在尝试添加其他 <div>s 和 <h2> 时遇到了麻烦

有人对如何实现这一点有任何建议吗？

Answer 1

我为div 定义了一个id，这样以后很容易找到。

希望这会有所帮助：

$(document).ready(function () {

    $( ".testimonial" ).wrapAll( "<div id='testimonial'></div>" );

    $( "<h2>Testimonial</h2>" ).insertBefore( "#testimonial" );

});

body{
  background: gainsboro;
}
#testimonial{
  background:white;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.2.6/jquery.min.js"></script>
<div class="curriculum">Content</div>
<div class="curriculum">Content</div>
<div class="testimonial">Content</div>
<div class="testimonial">Content</div>
<div class="testimonial">Content</div>
<div class="curriculum">Content</div>
<div class="curriculum">Content</div>

Answer 2

如果您不尝试使用包装方法，这可能会更容易......

我会一次性为您的包装器创建 HTML 结构，

var $wrapper = $('<div><div><h2>Testimonials</h2><div></div></div></div>');

并在第一个 .testimonial 元素之前插入：

$wrapper.insertBefore('.testimonial:first');

然后简单地抓取所有.testimonial 元素并将它们附加到我们刚刚创建的新结构的最里面的 div 元素...

$wrapper.find('div div').append($('.testimonial'));

在这个例子中检查生成的 DOM，它应该是你想要的：https://jsfiddle.net/rjh4ybxr/1/

Answer 3

如果有多个推荐案例需要分组，我想出了这个。

//find testimonials that are preceeded by a curriculum
$('.curriculum + .testimonial').each(function(){
  var $firstTestimonial = $(this);
  //get the first testimonial and all the immediately following testimonials
  var $group = $firstTestimonial.add($firstTestimonial.nextUntil(':not(.testimonial)'));
  //create a replacement with a id for the target of where the group should go
  var $replacement = $('<div><div><h2>Testimonials</h2><div id="tempTarget"></div></div></div>');
  
  //put the replacement where the first testimonial was
  $firstTestimonial.replaceWith($replacement);
  //put all the testimonials in the group in the replacement, and then get rid of the temporary id
  $replacement.find('#tempTarget').append($group).removeAttr('id');
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="curriculum">Content</div>
<div class="curriculum">Content</div>
<div class="testimonial">Content</div>
<div class="testimonial">Content</div>
<div class="testimonial">Content</div>
<div class="curriculum">Content</div>
<div class="curriculum">Content</div>
<div class="curriculum">Content</div>
<div class="curriculum">Content</div>
<div class="testimonial">Content</div>
<div class="testimonial">Content</div>
<div class="testimonial">Content</div>
<div class="curriculum">Content</div>
<div class="curriculum">Content</div>
<div class="curriculum">Content</div>
<div class="curriculum">Content</div>
<div class="testimonial">Content</div>
<div class="testimonial">Content</div>
<div class="testimonial">Content</div>
<div class="curriculum">Content</div>
<div class="curriculum">Content</div>