Question 352486 in Jquery Question posted in
The official Jquery Api Documentation can be found here.

Jquery – Group next 2 headline in a div

How can I group first 2 adjacent headlines in a div? Headlines can be any headline tags(h1 – h6).

If only one headline present, then only that headline will be wrapped.

HTML:

<div class="about-content-wrap content-with-double-headline">
   <h2>Milk &amp; Honey</h2>
   <h4>Taste of Heaven!</h4>
   <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>

This is what I have been trying:

$('.content-with-double-headline').find('h1,h2,h4,h4,h5,h6').wrapAll('<div></div>');

But it also wrapping the headline is not adjacent.

The result i want is this:

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

enter image description here

Tags:

2

Answers


  1. 0

    You can use .children() to get all children of the div

    then use slice(0,2) to get first 2.

    Now use .wrapAll() to wrap them into div

    working snippet:

    $('.about-content-wrap').children().slice(0,2).wrapAll('<div style="background:grey"></div>');
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
<div class="about-content-wrap">
   <h2>Milk &amp; Honey</h2>
   <h4>Taste of Heaven!</h4>
   <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>
    Login or Signup to reply.
  2. 0

    Try like below. I’ve added content-with-double-headline class to your div. Explanation is there in comment.

    // Get all header nodes
let x = $('.content-with-double-headline').find('h1,h2,h3,h4,h5,h6');

// Loop over selected nodes and check if next element is also a header then wrap it & break the loop.
for (let i = 0; i < x.length; i++) {
  // Get next sibling element
  let nextEl = $(x[i]).next();
  // Check if sibling element is header or not
  if (nextEl.is('h1,h2,h3,h4,h5,h6')) {
    // Wrap current & next element.
    $([x[i], nextEl[0]]).wrapAll('<div style="background:grey"></div>');
    break;
  }
}
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
<div class="about-content-wrap content-with-double-headline">
  <h2>Milk &amp; Honey</h2>
  <h4>Taste of Heaven!</h4>
  <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>
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search