0

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

<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，它将使每个集合中的跨度和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

4 回答 4

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 的宽度。

于 2012-04-13T04:00:34.800 回答
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/

于 2012-04-13T03:38:46.633 回答
0

好的，试试这个：

  $('li').each(function(){
       var width = $(this).find('IMG').width();
       $(this).find('.fade').width(width);
       $(this).find('.title').width(width);
    });
于 2012-04-13T03:40:22.110 回答
0 
$("#chain .fade,#chain .title").css('width','550px');
于 2012-04-13T03:42:51.943 回答