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>

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

我希望只使用.first().before和.last().after来获取第一个和最后一个推荐，以添加HTML，但JQuery会添加结束标记。我也尝试过使用JQuery的各种.wrapAll，.before，.append但由于我不理解的原因而没有运气！

stackoverflow上的其他解决方案似乎都只涉及将一组元素包装在一个<div>中，但在尝试添加其他<div>和<h2>时遇到问题

有人建议如何实现这一目标吗？

Answer 1

我为id定义了div，以便以后很容易找到。

希望这会有所帮助：

$(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

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

＆＃13;

//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');
});

＆＃13;

<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>

＆＃13;

使用JQuery

3 个答案: