php - jquery phpはcss値を動的に割り当てます

Question

順序付けられていないリストにいくつかの画像があります。

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

各セットのスパンと div に、すべての項目を手書きするのではなく、ループで表現されるように同じ幅を与える css が必要です

#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 の出力をエコーする必要がありますか?

Answer 1

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 の幅に設定されます。

Answer 2

これは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/

Answer 3

わかりました、これを試してください：

  $('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');