jquery php动态分配css值

时间:2012-04-13 03:29:10

标签: php jquery css

我在一个无序列表中有一些图像。

<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>

我需要css,它会给每个集合中的span和div带来相同的宽度,就像在循环中表达的那样,不是每个项目的手写

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

问题:我可以使用jQuery动态创建css吗?如果不能如何创建此CSS并使用PHP分配宽度值?
列表项将经常更改,我希望使用循环或.each语句。

换句话说,我不想列出每个项目的清单 有没有办法拉动li ID和IMG维度并动态创建css

伪代码:

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


我应该看一下php来回应每个ul li IMG的输出吗?

4 个答案:

答案 0 :(得分:2)

jQuery可以轻松地创建内联CSS样式(应用于每个元素的样式)。

$('#chain, #grips, #tires').each(function(index, element){
  $('.fade', element).width( $('img', element).width() );
});

以下是此脚本正在执行的操作

.each()遍历所有选定的元素。 index,顾名思义,是迭代的数组的索引。 element是迭代的当前元素。

$('.fade', element)这会查找元素中的fade类。

.width()将获取或设置元素的宽度。如果将参数传递给它,将设置它,例如:.width(15)。 (这会将元素的宽度设置为15像素宽。)如果没有任何元素传入元素,它将检索元素的宽度,例如:.width()

$('img', element).width()检索元素内img标记的宽度。因为这个值被传递到$('.fade', element).width(),所以它将使用淡入淡出类的img设置元素。

答案 1 :(得分:1)

这是如何使用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');
});

或者摆脱jQuery,只使用css:

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

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

答案 2 :(得分:0)

好的,试试这个:

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

答案 3 :(得分:0)

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