jquery php assign css values dynamically - php

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

jQuery easily allows you to create inline CSS styles (styles that are applied to each element).
$('#chain, #grips, #tires').each(function(index, element){
$('.fade', element).width( $('img', element).width() );
});
Here is what this script is doing
.each() iterates over all the selected elements. index, as the name suggests, is the index of the array being iterated over. element is the current element being iterated over.
$('.fade', element) this looks for the class of fade within the element.
.width() will either get or set the width of an element. It will be set if a parameter is passed into it, example: .width(15). (This will set the width of the element to 15 pixels wide.) It retrieves the width of an element if nothing is passed into it, example: .width().
$('img', element).width() retrieves the width of the img tag inside the element. Because this value is being passed into $('.fade', element).width(), it will set elements with the class of fade to width of the img.

Answer 2

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/

Answer 3

ok, try this:
$('li').each(function(){
var width = $(this).find('IMG').width();
$(this).find('.fade').width(width);
$(this).find('.title').width(width);
});

Answer 4

$("#chain .fade,#chain .title").css('width','550px');