断开的 JQuery 循环

Broken JQuery Loop

本文关键字：循环 JQuery 断开      更新时间：2023-09-26

我的选项卡是使用 PHP 创建的，所以我不希望每个选项卡切换器选项卡设置宽度。 因此，我正在尝试将选项卡切换器的总宽度相加，以便我可以设置宽度然后应用margin:0 auto;。

提醒var width正在返回 NaN。这是我第一次循环尝试，可能在某个地方搞砸了！（显然...

杰奎里 

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>

我认为你应该考虑使用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 .

不要继续查找内容。所有这样做只会让它变慢，因为你一遍又一遍地查找同一件事。

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

http://jsfiddle.net/drk01j1L/

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

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

相关文章：