Broken JQuery Loop

Question

My tabs are created using PHP so I do not want a set width per tabswitcher tab. Due to this I am trying to add up the total width of the tabswitcher so I can set the width then apply a margin:0 auto;.

Alerting the var width is returning NaN. This is my first loop attempt, probably screwed up somewhere! (obviously...)

JQuery

var width;
var NumOfTabs = $('.TabSwitcher .Tab').length;
var count = 1;
while (count < NumOfTabs){
    width = width + $('.TabSwitcher .Tab:nth-child(' + count + ')').width();
    count++;
}
width = width + (NumOfTabs * 4) // Add passing
$('.TabSwitcher').css({'width': width + 'px'});

HTML

<div class="TabSwitcher">
    <div class="Tab Active" id="Page_1">1</div>
    <div class="Tab" id="Page_2">2</div>
</div>

Are you going to argue about undefined/null and other things? Try to answer. — Adrian Iftode
– Adrian Iftode, Commented Jan 19, 2015 at 19:14
@AdrianIftode I see no arguing going on here. I even see an answer, twice. — Karl-André Gagnon
– Karl-André Gagnon, Commented Jan 19, 2015 at 19:19

Csarsam · Accepted Answer · 2015-01-19 21:00:43Z

2

I think you should consider using jQuery's handy each method, like so:

var width = 0;
var tabs = $('.TabSwitcher .Tab');
tabs.each(function(index, tab) {
    width += $(tab).width();
});
width += (tabs.length * 4); // Add padding
$('.TabSwitcher').css({'width': width + 'px'});

You should also note that width MUST be instantiated to 0. Otherwise, adding to it will only produce NaN.

edited Jan 19, 2015 at 21:00

answered Jan 19, 2015 at 19:17

Csarsam

4163 silver badges7 bronze badges

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

2 Comments

Ruan Mendes Over a year ago

By the way, though this is a nice suggestion, buried in your answer is the fact that the only bug the OP had was that they didn't initialize width to 0

Csarsam Over a year ago

@Regent Thanks! I skimmed right over that, but it's nicer with the +=. I've updated my answer.

epascarello · Accepted Answer · 2015-01-19 19:19:03Z

2

Do not keep looking things up. All that will do is make it slow since you keep looking up the same thing, over and over.

var width = 0;  //you original issue, initialize it with a start value
var tabs = $('.TabSwitcher .Tab'); //store it do not look it up over and over
var numOfTabs = tabs.length;

tabs.each( function() {  //use each to loop
    width = width + $(this).width();  //"this" is the current tab
});

width = width + (numOfTabs * 4) // Add padding
$('.TabSwitcher').css({'width': width + 'px'});

answered Jan 19, 2015 at 19:19

epascarello

208k20 gold badges206 silver badges246 bronze badges

Comments

aahhaa · Accepted Answer · 2015-01-19 19:24:16Z

0

http://jsfiddle.net/drk01j1L/

var width = 0;

$('.TabSwitcher .Tab').each(
function(index, el) {
   width = width + $(el).width();
}
);

$('.answer').html(width);

here, you use each to find all width add them together.

answered Jan 19, 2015 at 19:24

aahhaa

2,2713 gold badges20 silver badges31 bronze badges

Collectives™ on Stack Overflow

Broken JQuery Loop

3 Answers 3

2 Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

2 Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related