jQuery Loop thông qua mỗi div

Question

Tôi khá chắc chắn đây sẽ là một câu trả lời thực sự dễ dàng cho bạn jQuery whizzes, và tôi cũng khá như vậy nó liên quan đến một vòng lặp của một số loại.

Tôi đang cố thực hiện tính toán giống nhau trên hai div riêng biệt, nhưng chỉ định giá trị chiều rộng CSS khác nhau cho từng id dựa trên số lượng hình ảnh được tìm thấy. Các tính toán tôi đang thực hiện không liên quan đến vấn đề của tôi thực sự, nhưng tôi đặt chúng trong anyway bởi vì nó là mã thực tế tôi đang làm việc với.

Dưới đây là đánh dấu ...

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

Dưới đây là jQuery hiện tại của tôi, trong đó hoạt động tốt, nhưng nó không hiệu quả bởi vì tôi phải viết một đoạn mã cho mỗi div thêm. Làm thế nào tôi có thể chuẩn hóa điều này để nó chạy qua mọi div với lớp đích? Cảm ơn

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

Như thế này:

$(".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); 
}); 

Các $(this) đề cập đến hiện tại .target sẽ được looped qua. Trong số này .target Tôi đang tìm kiếm .scrolling img và nhận được chiều rộng. Và sau đó tiếp tục đi ...

hình ảnh với độ rộng khác nhau

Nếu bạn muốn để tính chiều rộng của tất cả các hình ảnh (khi họ có độ rộng khác nhau), bạn có thể làm điều đó như thế này:

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

Bạn nói đúng rằng nó liên quan đến một vòng lặp, nhưng đây là, ít nhất, thực hiện đơn giản bằng cách sử dụng các phương pháp 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)); 

    }); 

Tài liệu tham khảo:

• css() .
• each().
• find().

Answer 3

Còn khoảng .each() thì sao?

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); 
}); 

Ở đây bạn lặp qua tất cả của div của bạn với lớp mục tiêu và bạn làm các tính toán. Trong vòng lặp này, bạn có thể chỉ cần sử dụng $(this) để cho biết thẻ hiện đang được chọn <div>.

Answer 5

Cũng giống như chúng tôi đề cập đến scrolling lớp

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