jQuery 循环遍历每个 div

jQuery Loop through each div

提问by SparrwHawk

I'm pretty sure this will be a really easy answer for you jQuery whizzes, and I'm also pretty such it involves a loop of some kind.

我很确定这对 jQuery 高手来说将是一个非常简单的答案，而且我也很喜欢它涉及某种循环。

I'm trying to perform essentially the same calculation on two separate divs, but assigning a different CSS width value to each id based on the number of images found. The calculations I'm performing are irrelevant to my problem really, but I put them in anyway because it's the actual code I'm working with.

我试图对两个单独的 div 执行基本相同的计算，但根据找到的图像数量为每个 id 分配不同的 CSS 宽度值。我正在执行的计算实际上与我的问题无关，但我还是将它们放入其中，因为这是我正在使用的实际代码。

Here is the markup...

这是标记...

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

Below is my current jQuery, which works fine, but it's inefficient because I have to write another chunk of code for every div added. How can I standardise this so that it runs through every div with the class of target? Thanks

下面是我当前的 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);    

回答by Niels

Like this:

像这样：

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

The $(this)refers to the current .targetwhich will be looped through. Within this .targetI'm looking for the .scrolling imgand get the width. And then keep on going...

该$(this)指当前.target将通过环接。在此，.target我正在寻找.scrolling img并获得宽度。然后继续...

Images with different widths

不同宽度的图像

If you want to calculate the width of all images (when they have different widths) you can do it like this:

如果您想计算所有图像的宽度（当它们具有不同的宽度时），您可以这样做：

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

回答by David says reinstate Monica

You're right that it involves a loop, but this is, at least, made simple by use of the each()method:

你是对的，它涉及一个循环，但至少通过使用该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));

    });

References:

参考：

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

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

回答by Jules

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

Here you loop through all your div's with class targetand you do the calculations. Within this loop you can simply use $(this)to indicate the currently selected <div>tag.

在这里，您使用类目标遍历所有 div并进行计算。在这个循环中，您可以简单地使用$(this)来指示当前选择的<div>标签。

回答by abuduba

Just as we refer to scrollingclass

正如我们提到的scrolling班级

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

回答by sascha

What about .each()?

怎么样.each()？

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

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