Question

Bit of a strange one that I can’t seem to find a workable answer for; will probably be very simple!

I have some rogue li items which I’m using jquery to wrap in ul‘s and then position absolutely, but they are all in the same position (on top of each other).

What I need to do is use more jquery to increment each ul item like below:

<ul class="end"><li>Some text</li></ul> (top:30px;)
<ul class="end"><li>Some text</li></ul> (top:30px; - needs to be 60px)
<ul class="end"><li>Some text</li></ul> (top:30px; - needs to be 90px)

and so on and so forth. Now I would normally use css classes to do this but these items are generated dynamically and i don’t want lots of css classes as the amount could change/increase.

How would I make this work with jquery please (it’s not possible to use position:relative; or float in this instance)?

Answer 1

I suggest wrapping the entire group of ULs in a parent element (such as a div), giving the wrapper position:absolute, and giving the ULs themselves position:relative. This is the most robust and browser-compatible solution, and it’s the most common thing to do in this situation. I’ve done it myself, in fact.

<div class="wrap">
    <ul class="end"><li>Some text</li></ul>
    <ul class="end"><li>Some text</li></ul>
    <ul class="end"><li>Some text</li></ul>
</div>

<style type="text/css">
    .wrap { position:absolute; top:30px; }
    .end { position:relative; }
</style>

If for some reason that doesn’t work for you, you could iterate through the ULs with jQuery:

var currentHeight = 30;
$('ul.end').each(function() {
    $(this).css('top', currentHeight);
    currentHeight += $(this).height();
});

Edit:

Glad the above helped! Just for the record, jQuery can also pull elements out of the page flow and move them into your wrapper element. This should work even if they’re in amongst other elements.

$('ul.end').each(function() { 
    $(this).appendTo('.wrap'); 
});

I’d probably do it this way.