javascript - 想要将所有元素包装在一个 div 中，从

Question

所以我在包装我的 HTML 时遇到了一个小问题。使用jQuery来自一 <h2>标记到另一个 <h2>

这和这个很相似，但是解决方案不一样。 jQuery: How to select "from here until the next H2"?

我的问题是，我想将这些元素包装为一个整体。

这是我的HTML举个例子。

<div class="info-hold">
    <h2>Lorem</h2>
    <p class="lead">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sequi dolore quae, quas ipsum illo magni vero quaerat quam ipsam iste autem quisquam, aperiam laudantium cumque, porro amet! Sint ipsa, laborum!</p>
    <ul>
        <li>1</li>
        <li>2</li>
        <li>3</li>
        <li>4</li>
    </ul>
    <p class="lead">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Tenetur ab officiis nostrum modi aliquam, rem dicta deleniti provident sunt, libero nobis ea adipisci praesentium dolore fuga nesciunt iure at maiores!</p>
    <h2>Lorem 2</h2>
    <p class="lead">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sequi dolore quae, quas ipsum illo magni vero quaerat quam ipsam iste autem quisquam, aperiam laudantium cumque, porro amet! Sint ipsa, laborum!</p>
    <ul>
        <li>1</li>
        <li>2</li>
        <li>3</li>
        <li>4</li>
    </ul>
    <p class="lead">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Tenetur ab officiis nostrum modi aliquam, rem dicta deleniti provident sunt, libero nobis ea adipisci praesentium dolore fuga nesciunt iure at maiores!</p>
    <h2>Lorem 3</h2>
    <p class="lead">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sequi dolore quae, quas ipsum illo magni vero quaerat quam ipsam iste autem quisquam, aperiam laudantium cumque, porro amet! Sint ipsa, laborum!</p>
    <ul>
        <li>1</li>
        <li>2</li>
        <li>3</li>
        <li>4</li>
    </ul>
    <p class="lead">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Tenetur ab officiis nostrum modi aliquam, rem dicta deleniti provident sunt, libero nobis ea adipisci praesentium dolore fuga nesciunt iure at maiores!</p>
</div>

这是我想要实现的目标:

<div class="info-hold">
    <h2>Lorem</h2>
    <div class="info-wrapper">
        <p class="lead">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sequi dolore quae, quas ipsum illo magni vero quaerat quam ipsam iste autem quisquam, aperiam laudantium cumque, porro amet! Sint ipsa, laborum!</p>
        <ul>
            <li>1</li>
            <li>2</li>
            <li>3</li>
            <li>4</li>
        </ul>
        <p class="lead">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Tenetur ab officiis nostrum modi aliquam, rem dicta deleniti provident sunt, libero nobis ea adipisci praesentium dolore fuga nesciunt iure at maiores!</p>
    </div>
    <h2>Lorem 2</h2>
    <div class="info-wrapper">
        <p class="lead">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sequi dolore quae, quas ipsum illo magni vero quaerat quam ipsam iste autem quisquam, aperiam laudantium cumque, porro amet! Sint ipsa, laborum!</p>
        <ul>
            <li>1</li>
            <li>2</li>
            <li>3</li>
            <li>4</li>
        </ul>
        <p class="lead">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Tenetur ab officiis nostrum modi aliquam, rem dicta deleniti provident sunt, libero nobis ea adipisci praesentium dolore fuga nesciunt iure at maiores!</p>
    </div>
    <h2>Lorem 3</h2>
    <div class="info-wrapper">
        <p class="lead">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sequi dolore quae, quas ipsum illo magni vero quaerat quam ipsam iste autem quisquam, aperiam laudantium cumque, porro amet! Sint ipsa, laborum!</p>
        <ul>
            <li>1</li>
            <li>2</li>
            <li>3</li>
            <li>4</li>
        </ul>
        <p class="lead">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Tenetur ab officiis nostrum modi aliquam, rem dicta deleniti provident sunt, libero nobis ea adipisci praesentium dolore fuga nesciunt iure at maiores!</p>
    </div>
</div>

html 就在那里，我无法修改它，我需要一个 jQuery 解决方案。

谢谢。

这不是重复的，因为问题不同!

Answer 1

使用nextUtil，然后使用wrapAll

$('h2').each(function(){
  $(this).nextUntil('h2').wrapAll($('<div>', { class:'info-wrapper' }))
})

.info-wrapper{
  border:1px solid red;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div class="info-hold">
  <h2>Lorem</h2>
  <p class="lead">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sequi dolore quae, quas ipsum illo magni vero quaerat quam ipsam iste autem quisquam, aperiam laudantium cumque, porro amet! Sint ipsa, laborum!</p>
  <ul>
    <li>1</li>
    <li>2</li>
    <li>3</li>
    <li>4</li>
  </ul>
  <p class="lead">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Tenetur ab officiis nostrum modi aliquam, rem dicta deleniti provident sunt, libero nobis ea adipisci praesentium dolore fuga nesciunt iure at maiores!</p>
  <h2>Lorem 2</h2>
  <p class="lead">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sequi dolore quae, quas ipsum illo magni vero quaerat quam ipsam iste autem quisquam, aperiam laudantium cumque, porro amet! Sint ipsa, laborum!</p>
  <ul>
    <li>1</li>
    <li>2</li>
    <li>3</li>
    <li>4</li>
  </ul>
  <p class="lead">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Tenetur ab officiis nostrum modi aliquam, rem dicta deleniti provident sunt, libero nobis ea adipisci praesentium dolore fuga nesciunt iure at maiores!</p>
  <h2>Lorem 3</h2>
  <p class="lead">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sequi dolore quae, quas ipsum illo magni vero quaerat quam ipsam iste autem quisquam, aperiam laudantium cumque, porro amet! Sint ipsa, laborum!</p>
  <ul>
    <li>1</li>
    <li>2</li>
    <li>3</li>
    <li>4</li>
  </ul>
  <p class="lead">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Tenetur ab officiis nostrum modi aliquam, rem dicta deleniti provident sunt, libero nobis ea adipisci praesentium dolore fuga nesciunt iure at maiores!</p>
</div>