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
>> > [email protected]
>> > 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
>> [email protected]
>> http://jquery.com/discuss/
>>
>
> _______________________________________________
> jQuery mailing list
> [email protected]
> 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
[email protected]
http://jquery.com/discuss/
