各divのjQueryループ

Question

これは本当に簡単にjQueryの迷惑メールになると確信しています。

私は2つの別々のdivで本質的に同じ計算を実行しようとしていますが、見つかった画像の数に基づいて各IDに異なるCSS幅の値を割り当てています。私が行っている計算は実際には私の問題とは無関係ですが、私が実際に使っているコードなので、私はそれらを入れます。ここで

マークアップです...以下

<div id ='test1' class='target'> 
    <div class='scrolling'> 
    <img/> 
    <img/> 
    <img/> 
    </div> 
</div> 

<div id ='test2' class='target'> 
    <div class='scrolling'> 
    <img/> 
    <img/> 
    <img/> 
    </div> 
</div> 

が正常に動作している、私の現在のjQueryのですが、私が追加されるすべてのdivのためのコードの別のチャンクを記述する必要があるため、それは非効率的です。これを標準化して、すべてのdivをターゲットのクラスと一緒に実行できるようにするにはどうすればよいですか？おかげ

/* Measure the width of each image. */ 
test1 = $('#div1 .scrolling img').width(); 
test2 = $('#div2 .scrolling img').width(); 

/* Find out how many images there are. */ 
test1img = $('#div1 .scrolling img').length; 
test2img = $('#div2 .scrolling img').length; 

/* Do the maths. */ 
final1 = (test1 * test1img)*1.2; 
final2 = (test2 * test2img)*1.2; 

/* Apply the maths to the CSS. */ 
$('#div1 .scrolling').width(final1); 
$('#div2 .scrolling').width(final2);  

Answer 1

：

$(".target").each(function(){ 
    var images = $(this).find(".scrolling img"); 
    var width = images.width(); 
    var imgLength = images.length; 
    $(this).find(".scrolling").width(width * imgLength * 1.2); 
}); 

$(this)

を介してループする電流.targetを指します。この内で.target私は.scrolling imgを探していて幅を取得しています。

// Get the total width of a collection. 
$.fn.getTotalWidth = function(){ 
    var width = 0; 
    this.each(function(){ 
     width += $(this).width(); 
    }); 
    return width; 
} 

$(".target").each(function(){ 
    var images = $(this).find(".scrolling img"); 
    var width = images.getTotalWidth(); 
    $(this).find(".scrolling").width(width * 1.2); 
}); 

を：そして、あなたは（彼らは異なる幅を持っている場合）すべての画像の幅を計算したい場合はこのようにそれを行うことができます幅の異なる

画像

...行き続けます

Answer 2

あなたはそれがループを含むこと正しいですが、これは、少なくとも、each()法を用いて簡単に、次のとおりです。

$('.target').each(
    function(){ 
     // iterate through each of the `.target` elements, and do stuff in here 
     // `this` and `$(this)` refer to the current `.target` element 
     var images = $(this).find('img'), 
      imageWidth = images.width(); // returns the width of the _first_ image 
      numImages = images.length; 
     $(this).css('width', (imageWidth*numImages)); 

    }); 

参考文献：

• css() 。
• each()。
• find()。このよう

Answer 3

.each()についてはどうですか？ここで

http://api.jquery.com/each/

Answer 4

$('div.target').each(function() { 
    /* Measure the width of each image. */ 
    var test = $(this).find('.scrolling img').width(); 

    /* Find out how many images there are. */ 
    var testimg = $(this).find('.scrolling img').length; 

    /* Do the maths. */ 
    var final = (test* testimg)*1.2; 

    /* Apply the maths to the CSS. */ 
    $(this).find('scrolling').width(final); 
}); 

あなたクラスターゲットを持つすべてのあなたののdivのをループして、あなたは計算を行います。このループ内では、単に$(this)を使用して、現在選択されている<div>タグを示すことができます。

Answer 5

たちはscrollingクラス

$(".scrolling").each(function(){ 
    var img = $("img", this); 
    $(this).width(img.width() * img.length * 1.2) 
})