如何更改jquery ui对话框按钮的颜色？

我需要通过添加另一个css类来更改jQueryUI对话框按钮的颜色

  $('.ui-dialog-buttonpane').find('button').addClass('cancelButton');

上面的代码行已用于更改css类，但它无助于更改颜色

下面是一个示例代码

有人能帮我找出问题所在吗？

试试看

$('#message1').find('.ui-button').addClass('cancelButton');

及

---

演示：

jquery ui按钮不是html按钮。它们是使用div和span构造的。因此，您需要通过其他方式找到它，如类或id：

$('#btnCancel').addClass('cancelButton');

看

编辑

---

如果您想更改多个按钮，那么可以查找或添加公共类，就像ArunPJohny的回答一样。所有ui按钮都已具有

ui按钮类，在某些情况下，这就足够了。
初始化按钮集合时，您还可以设置按钮类：

buttons: [ { text: 'Cancel', class : 'cancelButton' } ]

Gruff Bunny是对的，但代码非常简单。
更有用的代码如下所示：

$('#dialog').html("This is a confirmation dialog.");
$('#dialog').dialog({
            buttons : [
                {
                    text:'OK',
                    class:'green',
                    click: function() {
                        alert("OK");
                        $(this).dialog("close");                        
                    }                   
                },
                {
                    text:'CANCEL',
                    class:'red',
                    click: function() {
                        $(this).dialog("close");
                    }                   
                }
            ]
        });

我如何在不使用下面的.ui按钮扩展的情况下实现这一点？例如：cancelButton{border:1px solid#aaaaaa/*{borderColorContent}*/；color:#FF0000/*{fcContent}*/}，因为我需要引用应用程序中已经存在的类。（我不想改变css的结构）当我移除.ui按钮并添加行背景：红色！重要的；对你的css来说，它是有效的。你能解释一下怎么做吗？因此，如果我需要更改两个按钮，有没有简单的方法找到所有按钮并更改颜色$（“#message1”）.find（'button'）.addClass（'cancelButton'）；我尝试了以上方法，但没有效果。欢迎来到SO Mduja。如果你能在一两行中添加一些关于你的答案的描述性信息，让所有SO用户更好地理解它，这将是非常棒的，并将帮助社区。谢谢
$('#dialog').html("This is a confirmation dialog.");
$('#dialog').dialog({
            buttons : [
                {
                    text:'OK',
                    class:'green',
                    click: function() {
                        alert("OK");
                        $(this).dialog("close");                        
                    }                   
                },
                {
                    text:'CANCEL',
                    class:'red',
                    click: function() {
                        $(this).dialog("close");
                    }                   
                }
            ]
        });

$('#dialog').html("This is a confirmation dialog.");
$( "#dialog" ).dialog({
    buttons: [
        {
            text: "OK",
            open: function() {
                $(this).addClass('okClass');
            },
            click: function() {
                alert("OK");
                $( this ).dialog( "close" );
            }
        },
        {
            text: "CANCEL",
            open: function() {
                $(this).addClass('cancelClass');
            },
            click: function() {
                $( this ).dialog( "close" );
            }
        }
    ]
});