Question

i have some images in an un ordered list.

<ul>
    <li id='chain'>
        <a href="">
            <span class='fade'></span>
            <div class='title'>TITLE</div>
            <img src="img/bike/chain.jpg" alt="" width="550" height="440" />
        </a>
    </li>
    <li id='grips'>
        <a href="">
            <span class='fade'></span>
            <div class='title'>TITLE</div>
            <img src="img/bike/grips.jpg" alt="" width="275" height="440" />
        </a>
    </li>
    <li id='tires'>
        <a href="">
            <span class='fade'></span>
            <div class='title'>TITLE</div>
            <img src="img/bike/tires.jpg" alt="" width="175" height="220" />
        </a>
    </li>
</ul>

i need css that will give the span and div in each set the same width like this expressed in a loop, NOT hand written every item

#chain .fade,   #chain .title {width:550px}
#grips .fade,   #grips .title {width:275px}
#tires .fade,   #tires .title {width:175px;}

question: could i dynamically create css using jQuery? if not how can i create this css and assign the width value using PHP?
the list items will change often and i wish to use a loop or .each statement.

in other words i dont want to make a list of each item
is there a way to pull the li ID and the IMG dimension and dynamically create css

pseudo code:

var w = $('ul li').each(find img width).assign it to> .css(this .fade, this .title {width:w + "px"});

or
should i look into php to echo the output of each ul li IMG?

Answer 1

This is how to do it with jQuery:

$('li').each(function(){
    var $li = $(this);   
    var $img = $li.find('img');
    var width = $img.attr('width');
    $li.find('.fade, .title').css('width', width + 'px');
});

Or get rid of the jQuery, and use just css:

​li { float: left; clear: left; }

http://jsfiddle.net/u2HNx/2/