CODEWITHSUNDEEP
javascriptjquery
brother
brother

Reputation: 8171

Hide everything between 2 h2 tags?

I have the following html snippet;

<h2>Headline 1</h2>
<p>Lorem ipsum bla bla</p>
<p>Lorem ipsum bla bla</p>
<p>Lorem ipsum bla bla</p>

<h2>Headline 2</h2>
<p>Lorem ipsum bla bla</p>

<h2>Headline 3</h2>
<p>Lorem ipsum bla bla</p>
<p>Lorem ipsum bla bla</p>

I wish to somehow, via jquery, target each "block" so i can append a div arround it. By "block" i mean all the code between h2 start-tag and down to the last p-tag, before the next h2 start-tag. The last h2-tag within the section, should just take the last p-tag.

Any suggestions as to how i best do this?

Upvotes: 0

Views: 350

Answers (2)

Selvakumar Arumugam
Selvakumar Arumugam

Reputation: 79830

Try using .nextUntil if you just want to hide all elements between two h2.

DEMO

$('h2').nextUntil('h2').hide();

If you want to block anywhere b/w 2 h2 then you can use,

DEMO

$('h2').each (function () {
    $(this).nextUntil('h2').wrapAll('<div class="hidden">');
});

Upvotes: 0

Yoshi
Yoshi

Reputation: 54659

Try:

$('h2').each(function () {
    $(this).nextUntil('h2').add(this).wrapAll('<div class="foo">');
});​

http://jsfiddle.net/RUKDj/

Upvotes: 3

Related Questions