切换由<li> </li>表示的表单选项卡

时间:2013-06-22 10:53:02

标签: jquery iterator next

我使用块显示的列表项创建了一些表单选项卡。 然后我还有下一个和上一个按钮$('#wiznext')$('#wizprev')。 只要单击下一个,就会选中选项卡列表中的下一个列表元素,并完成相应的操作。

HTML是这样的:

<ul id='tabs'>
<li> Tab 1 </li>
<li> Tab 2 </li>
...

jquery是这样的:

$('#wizprev').click(function(){
   switchTab($current.prev('li').attr('id'));
 }

但是我想提出一个条件,即如果没有先前的列表项,则不要切换选项卡。因此,如果用户已在选项卡1上,则点击previous不应执行任何操作。

我这样做: 我试过这个条件,但没有什么区别:

if($current.prev('li').length>0)
            switchTab($current.prev('li').attr('id'));

这样做的正确方法是什么?

2 个答案:

答案 0 :(得分:0)

如果检查是否有下一个

,请使用
var next = $('#your-selector').next().length;

if(next == 0)
{ 
    return false;
} else {
    // do stuff
}

如果您检查是否有上一个项目,请使用

var prev = $('#your-selector').prev().length;

if(prev == 0)
{ 
    return false;
} else {
    // do stuff
}

答案 1 :(得分:0)

保留某种计数变量,当用户点击上一个或下一个时,该变量将递增或递减。像这样:

var tabCounter = 1;
$('#wizprev').click(function(){
    if(tabCounter > 1) {
        tabCounter--;
        switchTab($current.prev('li').attr('id'));
    }
}

$('#wiznext').click(function() {
    if(tabCounter < $('#current li').length) {
        tabCounter++;
        switchTab($current.next('li').attr('id'));
    }
});

这样的事情,跟踪标签号,如果用户已经在第一个标签上,则不做任何事情。然后检查何时进入下一个标签,它不是最后一个