Hi Greg -
I created a plugin a while back that can help with this, called nextUntil:
$.fn.nextUntil = function(expr) {
var match = [];
this.each(function(){
var cur = this.nextSibling;
while ( cur && jQuery.filter( expr, [cur] ).r.length ) {
match = jQuery.merge( match, [ cur ] );
cur = cur.nextSibling;
}
});
return this.pushStack( match, arguments );
};
Just include that after you include jquery.js then do the following:
$("#content h2").each(function(){
$(this).nextUntil("h2").wrap("<div class='note'></div>");
});
Just 3 lines! Not too shabby :)
--John
On 10/18/06, Greg Bird <[EMAIL PROTECTED]> wrote:
>
> Hi everyone.
>
> I am attempting to develop some dynamic "in page" navigation. I am a big
> fan of structural markup.
>
> Each H2 represents a new section of the current document.
>
> I wish to:
> 1. Find each H2
> 2. Wrap this in a unique div, up to (but not including) the next H2. This
> will then be used to further manipulate the page
>
>
>
> <div id="content>
> ........
> <h2>First section</h2>
> ...[arbitary HTML]....
> <h2>second section</h2>
> ...[arbitary HTML]....
> <h2>third section</h2>
> .........
> </div>
>
> Becomes:
> <div id="content>
> ........
> <div id="1">
> <h2>First section</h2>
> ...[arbitary HTML]....
> </div>
>
> <div id="2">
> <h2>second section</h2>
> ...[arbitary HTML]....
> </div>
> <h2>third section</h2>
> .........
> </div>
>
> Here is the JQuery that I have developed to date:
>
> $(document).ready(function(){
> BuildNav();
> });
> /*BUILD SIDE NAVIGATION*/
> function BuildNav() {
> //add back to top links before each H2
> $('#content h2').each(function(i){
> if(i==0){//FIRST H2
> $(this).before('<div id="'+ i +'" class="note">')//START A NEW DIV WITH
> UNIQUE ID
> }
> else {
> $(this).before('</div><div id="'+ i +'" class="note">');//TERMINATE
> PREVIOUS DIV, BEGIN NEW ONE
> }
> })
> $('#content').append('</div>');//TERMINATE FINAL DIV
> }
>
> This looks sensible to me but fails. It appears you cannot inject
> unterminated tags and that JQUERY automatically closes tags on insertion,
> resulting in:
>
> <div id="content>
> ........
> <div id="1"></div>
> <h2>First section</h2>
> ...[arbitary HTML]....
> <div id="2"></div>
> <h2>second section</h2>
> ...[arbitary HTML]....
> <div id="3"></div>
> <h2>third section</h2>
> .........
> </div>
>
> Can anyone give me any clues? Thanks in advance, Greg Bird
_______________________________________________
jQuery mailing list
[email protected]
http://jquery.com/discuss/
