This should be quite easy - for each section start you add some
padding, for each section end you remove it:
var sectionPadding = 0;
var sectionIndent = 10;
$('#survey div').each(function(){
if( $(this).is('.sectionend') ) {
sectionPadding -= sectionIndent;
}
$(this).css('margin-left', sectionPadding + 'px');
if( $(this).is('.sectionstart') ) {
sectionPadding += sectionIndent;
}
});
Works with the html supplied.
On Apr 10, 9:27 am, JB <[EMAIL PROTECTED]> wrote:
> I've got the following html
>
> <div id="survey">
> <br />
> <div class="sectionstart">
> start
> </div>
> <div class="sectionstart">
> start
> </div>
> <div class="sectionend">
> end
> </div>
> <div class="sectionstart">
> start
> </div>
> <div class="sectionend">
> end
> </div>
> <div class="sectionstart">
> start
> </div>
> <div class="sectionstart">
> start
> </div>
> <div class="sectionend">
> end
> </div>
> <div class="sectionend">
> end
> </div>
> <div class="sectionend">
> end
> </div>
> </div>
>
> As you can see there are section starts & section ends that can
> contain other starts and ends. I want to leave the html as is, but
> visually give some left padding/margin based on how 'deep' the section
> is. I've been trying to get this via jquery but can't seem to get
> it. Say I'm one level deep I want margin-left:20px, if I'm 2 levels
> deep I want margin-left:40px and so on...
>
> Thanks for the help.
