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:
Blair
});
}
It relies on the assumption that appendTo moves the origonal element list, rather than clones them. Basically:
- It adds your div before the heading, with a temporary marker so we can find it again
- Selects all elements until the next heading
- Moves them to the div
- 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/
