Question

我的标签是使用PHP创建的，所以我不希望每个标签开关标签设置一个宽度。因此，我试图将tabwitcher的总宽度相加，这样我就可以设置宽度然后应用margin:0 auto;。

警告var width正在返回NaN。这是我的第一次循环尝试，可能搞砸了！（显然...）

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>

Answer 1

我认为您应该考虑使用jQuery方便的each方法，如下所示：

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

您还应注意width必须实例化为0。否则，添加到它只会产生NaN。

Answer 2

不要继续寻找。所有这一切都会让它变慢，因为你一遍又一遍地看着同样的东西。

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

Answer 3

http://jsfiddle.net/drk01j1L/

var width = 0;

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

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

在这里，您使用每个来查找所有宽度将它们添加到一起。

破碎的JQuery循环

3 个答案: