Man, you are amazing at this stuff. Really appreciate all the effort you have taken, particularly putting up the test case.
I am new to the mailing list and can't get past how prolific you are. You must live and breath this stuff. It is great to find someone so willing to help out!!! I have implemented your code and it works BEAUTIFULLY, straight out of the box. I will now go ahead and construct the dynamic navigation part. Will fire the URL to you when I've finished so you can have a look at where I was headed with this. Thanks again, Cheers, Greg Hat's off, Greg John Resig wrote: > > Ok, I did some more digging and you're right. I don't think I ever > actually tested nextUntil (oops!) > > The full implementation can be found here: > http://john.jquery.com/jquery/test/nextuntil.html > > This includes a working version of nextUntil: > $.fn.nextUntil = function(expr) { > var match = []; > > // We need to figure out which elements to push onto the array > this.each(function(){ > // Traverse through the sibling nodes > for( var i = this.nextSibling; i; i = i.nextSibling ) { > // Make sure that we're only dealing with elements > if ( i.nodeType != 1 ) continue; > > // If we find a match then we need to stop > if ( jQuery.filter( expr, [i] ).r.length ) break; > > // Otherwise, add it on to the stack > match.push( i ); > } > }); > > return this.pushStack( match, arguments ); > }; > > Additionally, I realized that .wrap() isn't going to do what you need > it to. .wrap() wraps each matched element with the same structure. So > if you matched 3 paragraphs, you'd have three surrounding divs too. > Since you want it to wrap all of the matched elements with a single > element, I made a new .wrapAll() plugin: > > $.fn.wrapAll = function() { > // There needs to be at least one matched element for this to work > if ( !this.length ) return this; > > // Find the element that we're wrapping with > var b = jQuery.clean(arguments)[0]; > > // Make sure that its in the right position in the DOM > this[0].parentNode.insertBefore( b, this[0] ); > > // Find its lowest point > while ( b.firstChild ) b = b.firstChild; > > // And add all the elements there > return this.appendTo(b); > }; > > So - all of that should help you along now. Let me know if this works for > you. > > --John > > On 10/18/06, Greg Bird <[EMAIL PROTECTED]> wrote: >> >> Thanks for this Blair.....a really interesting approach and one I >> wouldn't >> have thought of myself. >> >> At the moment, I am having problems with the NextUntil function, but once >> I >> have this solved, your suggestion may be a really neat implementation. >> >> Cheers, Greg >> >> >> >> Blair McKenzie-2 wrote: >> > >> > This is just a guess: >> > >> > function BuildNav() { >> > $("#content h2").each(function(){ >> > $(this).before("<div class='note >> > newdivmarker'></div>").nextUntil("h2").appendTo(".newdivmarker"); >> $(" >> > div.newdivmarker").removeClass("newdivmarker); >> > }); >> > } >> > >> > It relies on the assumption that appendTo moves the origonal element >> list, >> > rather than clones them. Basically: >> > >> > 1. It adds your div before the heading, with a temporary marker so >> we >> > can find it again >> > 2. Selects all elements until the next heading >> > 3. Moves them to the div >> > 4. Removes the marker from the div >> > >> > >> > Blair >> > >> > >> > On 10/18/06, Greg Bird <[EMAIL PROTECTED]> wrote: >> >> >> >> >> >> Hi John, >> >> >> >> >> >> thanks again for your help, unfortunately I have deployed your >> >> suggestions >> >> and am still unable to get it to work. You can view my testpage at: >> >> http://members.optusnet.com.au/greg.bird/mm/collapse.html >> >> >> >> My .js now reads: >> >> >> >> $(document).ready(function(){ >> >> BuildNav(); >> >> }); >> >> //DEFINE NextUntil FUNCTION >> >> >> >> $.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; >> >> } >> >> console.log(this,cur,match); >> >> }); >> >> >> >> return this.pushStack( match, arguments ); >> >> }; >> >> >> >> /*BUILD SIDE NAVIGATION*/ >> >> function BuildNav() { >> >> $("#content h2").each(function(){ >> >> $(this).nextUntil("h2").wrap("<div class='note'></div>"); >> >> }); >> >> } >> >> >> >> I have logged the script and it appears that the "match" array is not >> >> being >> >> populated. I suspect that the Jquery.merge function is not triggering >> >> properly >> >> >> >> Does this function work with JQUERY 1.0.2? In note in the JQUERY doco >> >> that >> >> the function call is now $.merge. Trialled this without success. >> >> >> >> My aim here is to put a unique div around each section of the page and >> >> then >> >> dynamically create an expand/collapse navigation system. Have already >> >> achieved a similar result with a sliding navigation system. You can >> see >> >> this at: >> >> >> >> http://members.optusnet.com.au/greg.bird/mm/index.html >> >> >> >> This was easier as I didn't need to wrap div's around anything, but >> >> simply >> >> anchor to the existing H2's >> >> >> >> >> >> Have you got any suggestions? Do you have any test pages so that I >> can >> >> view >> >> your implementation? >> >> >> >> Thanks in advance, Greg >> >> >> >> John Resig wrote: >> >> > >> >> > 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 >> >> > discuss@jquery.com >> >> > http://jquery.com/discuss/ >> >> > >> >> > >> >> Quoted from: >> >> >> >> >> http://www.nabble.com/Please-help%21-Dynamically-Wrapping-DIV%27s-around-structural-markup.-tf2464168.html#a6869443 >> >> >> >> -- >> >> View this message in context: >> >> >> http://www.nabble.com/Please-help%21-Dynamically-Wrapping-DIV%27s-around-structural-markup.-tf2464168.html#a6870422 >> >> Sent from the JQuery mailing list archive at Nabble.com. >> >> >> >> >> >> _______________________________________________ >> >> jQuery mailing list >> >> discuss@jquery.com >> >> http://jquery.com/discuss/ >> >> >> > >> > _______________________________________________ >> > jQuery mailing list >> > discuss@jquery.com >> > http://jquery.com/discuss/ >> > >> > >> >> -- >> View this message in context: >> http://www.nabble.com/Please-help%21-Dynamically-Wrapping-DIV%27s-around-structural-markup.-tf2464168.html#a6870801 >> Sent from the JQuery mailing list archive at Nabble.com. >> >> >> _______________________________________________ >> jQuery mailing list >> discuss@jquery.com >> http://jquery.com/discuss/ >> > > > -- > John Resig > http://ejohn.org/ > [EMAIL PROTECTED] > > _______________________________________________ > jQuery mailing list > discuss@jquery.com > http://jquery.com/discuss/ > > -- View this message in context: http://www.nabble.com/Please-help%21-Dynamically-Wrapping-DIV%27s-around-structural-markup.-tf2464168.html#a6889428 Sent from the JQuery mailing list archive at Nabble.com. _______________________________________________ jQuery mailing list discuss@jquery.com http://jquery.com/discuss/
