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
--
View this message in context:
http://www.nabble.com/Request-for-assistance%3A--Wrapping-div%27s-aroiund-structural-markup-tf2449875.html#a6828385
Sent from the JQuery mailing list archive at Nabble.com.
_______________________________________________
jQuery mailing list
discuss@jquery.com
http://jquery.com/discuss/
