Defekter JQuery Loop

Question

Meine Tabs werden mit PHP erstellt, daher möchte ich keine feste Breite pro Tabswitcher-Tab haben. Deshalb versuche ich, die Gesamtbreite des Tabswitchers zu berechnen, damit ich dann die Breite festlegen und einen margin: 0 auto; anwenden kann.

Das Alert des var width gibt NaN zurück. Dies ist mein erster Schleifenversuch, irgendwo habe ich wahrscheinlich etwas falsch gemacht! (offensichtlich...)

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

    1
    2

Answer 1

Ich denke, du solltest in Betracht ziehen, die praktische each Methode von jQuery zu verwenden, wie folgt:

var width = 0;
var tabs = $('.TabSwitcher .Tab');
tabs.each(function(index, tab) {
    width += $(tab).width();
});
width += (tabs.length * 4); // Fügen Sie Padding hinzu
$('.TabSwitcher').css({'width': width + 'px'});

Du solltest auch beachten, dass width UNBEDINGT auf 0 instanziiert werden muss. Andernfalls wird die Addition zu NaN führen.

Answer 2

Suchen Sie nicht ständig nach Dingen. Alles, was Sie tun werden, ist es langsam zu machen, da Sie immer dasselbe nachsehen.

var width = 0;  //Ihr ursprüngliches Problem, initialisieren Sie es mit einem Startwert
var tabs = $('.TabSwitcher .Tab'); //speichern Sie es, suchen Sie es nicht immer wieder
var numOfTabs = tabs.length;

tabs.each( function() {  //verwenden Sie each zum Schleifen
    width = width + $(this).width();  //"this" ist der aktuelle Tab
});

width = width + (numOfTabs * 4) // Padding hinzufügen
$('.TabSwitcher').css({'width': width + 'px'});

Answer 3

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.