如何使用jQuery确定给定类的剩余元素?

时间:2012-05-06 20:59:01

标签: jquery jquery-selectors

假设我有一个按钮列表。每个按钮属于一个“.button”类。每个按钮在视觉上以选定状态显示。每个按钮还有一个样式类,将其与给定的功能相关联,即; “.widget-1”,“。widget-2”,因此<div class="button widget-1">等等。单击按钮时,我会执行:$(this).addClass("selected")

请注意,我有任意数量的按钮,我不知道在任何给定时间我将拥有多少按钮,因为列表是数据驱动的,并且在运行时动态调整大小和样式。

但是,当只剩下一个按钮保持未勾选时,有一种情况必须满足条件,即;一个没有添加“.selected”类的按钮。

出于说明目的,请考虑以下代码:

for (var n = 0; n < Math.round(Math.random() * 10); n++ ) {
    $('<button />').attr({class: 'button widget-' + n})
    .appendTo('body')
    .click(function(){
        $(this).addClass('selected');
        // Am I the last .button without .selected class?
    });
}

这比听起来更棘手:意识到每个按钮都不会知道它是最后一个,直到其类中的另一个任意按钮被勾选为止。

请帮忙吗?

1 个答案:

答案 0 :(得分:1)

用这段代码替换你的点击处理程序主体,这将检查是否有任何其他按钮被选中。

$(this).addClass('selected');
if( $('button.selected').length == 0) {
    alert("This is the last button");
}

如果在将所选类添加到单击按钮后,“已选择”类的按钮集合的大小为零,则表示它是最后一个。

现在,你的问题有点模糊,因为不清楚你是否打算只计算带有“按钮”类的按钮(“我是最后一个.button而不是.selected类”)或者你是否打算计算所有按钮元素。如果您只想使用“按钮”类来计算按钮,那么您可以使用:

$(this).addClass('selected');
if( $('button.button.selected').length == 0) {
    alert("This is the last button");
}