jquery width multiple ID different values

Question

thanks to some help i got around i made this jquery function that gets the sum of widths of IMGs within a DIV.

now i have a new problem: multiple div.IDs with different widths, how can i make it most performant?

my code is this, for 1 div:

$(window).load(function(){
var widthSum = 0;
$('#oneid.scroll-content-item img').each(function(){
widthSum += $(this).width() + 20;
});
$( ".scroll-content" ).css('width', widthSum);

should i repeat this code several times with different IDs? if i make for example multiple selectors like this:

$('#oneid.scroll-content-item img, #twoid.scroll-content-item img').each(function(){

it will count them together, but i need separate.

any ideas?

thanks all!

Why don't you just get the width of whatever HTML element contains all the images? If there isn't one, put them in there. That way you can avoid having to fudge things (like with the + 20). — Cymen
– Cymen, Commented Dec 6, 2012 at 23:42
It seems to me you're using an id like you should be using a class. — James McDonnell
– James McDonnell, Commented Dec 6, 2012 at 23:43

GNi33 · Accepted Answer · 2012-12-06 23:43:33Z

2

//this will go over any element with the class "scroll-content-item" seperately
$('.scroll-content-item').each(function(){
    var wrapper = $(this);
    var wrapperWidth = 0;

    //this will go over every img inside the seperate wrappers
    wrapper.find('img').each(function(){
        wrapperWidth += $(this).width() + 20;
    });

    wrapper.css('width', wrapperWidth);
});

answered Dec 6, 2012 at 23:43

GNi33

4,5092 gold badges33 silver badges45 bronze badges

Sign up to request clarification or add additional context in comments.

5 Comments

bboy Over a year ago

hi! thanks, i'm using out this one now, trying to make it work. from what i understand the .width() + 20 is for the margin, should I use something like outerWidth() and remove the +20? it's almost 100% working

GNi33 Over a year ago

you could try using .outerWidth(true), yes

bboy Over a year ago

tried that and + 20 together and i get a blank space after last img. if i remove +20 then the last image jumps to a 2nd row (on one div) and fits good on the other div ?!

GNi33 Over a year ago

hard to say without seeing an example what's the case here. can you set up something at jsfiddle.com?

bboy Over a year ago

yes, thats understandable. i'm using wordpress, would be a pain to move to jsfiddle. one demo site works perfect with one DIV. let me give it a few tries, maybe i can solve it on my own. anyways except the little blank space after last element, works perfectly! thank you!

adeneo · Accepted Answer · 2012-12-06 23:58:35Z

0

function getWidth(elem) {
    var widthSum = 0;
    $('img', elem).each(function(){
        widthSum += $(this).width() + 20;
    });
    return widthSum;
}


$(window).load(function(){
    $('.scroll-content').each(function() {
        $(this).css('width', getWidth(this));
    });
});

edited Dec 6, 2012 at 23:58

answered Dec 6, 2012 at 23:42

adeneo

319k29 gold badges410 silver badges392 bronze badges

1 Comment

bboy Over a year ago

still the same, no value returned

Collectives™ on Stack Overflow

jquery width multiple ID different values

2 Answers 2

5 Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

5 Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related