0

.each() を使用して DOM を実行し、特定の要素セットの高さに基づいて複数の変数を作成しようとしています。リスト内のすべての画像の幅を考えてみましょう。

この単純化された例では、リスト項目が保持する画像の幅に基づいて、順序付けられていないリストの各リスト項目に幅を追加したいと考えています。このようにして、リスト項目の幅は内部の画像の幅と等しくなります。

HTML

 <ul>
  <li><img src="image_01.jpg" width="100" /></li>
  <li><img src="image_02.jpg" width="60" /></li>
  <li><img src="image_03.jpg" width="220" /></li>
  <li><img src="image_04.jpg" width="40" /></li>
</ul>

Jクエリ

var itemWidth = 0;
$('ul li img').each(function () {
    var tmpWidth = $(this).width(); 

    if (tmpWidth > itemWidth) {
        itemWidth = (tmpWidth);
        elemWidth = $('ul li').width();
        $('ul li').css( "width", itemWidth );

    }
});

現在、各リスト項目の幅を設定していますが、リスト内の画像に基づいて各リスト項目を異なる幅に設定するのではなく、リスト内の最大の画像にすべて等しく設定しています。

各幅に対応する複数の変数を保持するために、配列を使用して for ループを作成する必要がありますか?

フィドルの例を次に示します: http://jsfiddle.net/EBMM2/

4

3 に答える 3

0

jsFiddle Demo

画像の幅を確認するときに、すべての要素ではなく親ノードを参照する必要があります。また、これを条件付きで適用するために変数を使用する必要はありません。すべてのアイテムに対して行うだけです。

$('ul li img').each(function () {
 var itemWidth = $(this).width();
 $(this.parentNode).css( "width", itemWidth );
});
于 2013-05-10T18:54:00.200 に答える
0

フィドルのデモ

このようにします >>

$('ul li img').each(function () {
    var itemWidth = $(this).width(); 
    $(this).parent().css( "width", itemWidth );
});

この方法で作成していた場合、このコードで$('ul li').css( "width", itemWidth );すべての幅を一緒に設定し、 に変更すると正常に動作します。li$(this).parent().css( "width", itemWidth );

于 2013-05-10T18:51:55.413 に答える
0

img から始めて変更したいのは、囲んでいるli要素です。で取得できます$(this).closest('li')。

変化する

var tmpWidth = $(this).width(); 
if (tmpWidth > itemWidth) {
    itemWidth = (tmpWidth);
    elemWidth = $('ul li').width();
    $('ul li').css( "width", itemWidth );
}

に

var imgWidth = $(this).width();
var elem = $(this).closest('li');
if (imgWidth>elem.width()) {
    elem.css("width", imgWidth);
}
于 2013-05-10T18:46:34.687 に答える