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.
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.
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
/* 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);
What about .each()
?
You're right that it involves a loop, but this is, at least, made simple by use of the each()
method:
$('.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:
$('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 target and you do the calculations. Within this loop you can simply use $(this)
to indicate the currently selected <div>
tag.
Just as we refer to scrolling
class
$( ".scrolling" ).each( function(){
var img = $( "img", this );
$(this).width( img.width() * img.length * 1.2 )
})
Source: Stackoverflow.com