just wanted to pipe in here, i'm using $.nextUntil and $.wrapAll in the custom paginator i'm building and it worked great. thanks, john.
-p On Oct 18, 2006, at 12:21pm, 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/ > > _______________________________________________ jQuery mailing list discuss@jquery.com http://jquery.com/discuss/
