ansaurus

Question

Answer 1

+3 A:

have you tried $(":button") ?

Philippe Leybaert 2009-07-24 07:11:59

Answer 2

+5 A:

$(":button").addClass("yourclassname");

This matches all button elements and input elements of type button and adds class to them.

rahul 2009-07-24 07:13:58

`:button` means `*:button`. I would recommend changing it to `input:button`.

Blixt 2009-07-24 07:17:28

Then you're missing the <button> elements.

Philippe Leybaert 2009-07-24 07:20:51

It won't select button elements.

rahul 2009-07-24 07:23:52

But those are easy enough to match with CSS. I'd rather make the jQuery `$("button, input:button")` if I really wanted to add the class to all buttons. It would be more efficient than checking every single element on the page.

Blixt 2009-07-24 07:25:34

For the sake of argument, run this in Firebug on this page: `console.log($('input:text').length, '<', $('*').length);` I get `5 < 671` - so I think there ought to be some performance difference in specifying the element type. I'm surprised that jQuery doesn't add the possible element types to the query when they hit a `:text` etc selector, but according to the documentation (http://docs.jquery.com/Selectors/text), it doesn't. I haven't looked at the source though.

Blixt 2009-07-24 07:36:31

Sorry for the comment spam. I did have a look at the source now and `:something` filters are implemented in such a generic way, that it simply just runs whatever is after a colon through a `jQuery.expr.something` function, at a stage after the initial elements have already been selected, so it will select all elements. But considering how often people use `:text` etc. instead of `input:text` I think it might be worth suggesting a special-case optimization...

Blixt 2009-07-24 07:44:17

@Blixt: very good point. Learned something new again today :) I checked the jQuery source also, and it suprised me how inefficient the :xxx filters have been implemented.

Philippe Leybaert 2009-07-24 08:50:42

Answer 3

+2 A:

You can not do it automatically in IE6 without javascript. Here is how you can do it with jQuery

$(":button").addClass( "something" );

Kane Wallmann 2009-07-24 07:14:04

Answer 4

+5 A:

I usually like not to use JavaScript for this, so I add class="text" for <input> elements that are of text type, class="button" for <input> elements that are of button type, and so on. Then I can match them with input.text etc.

While you don't want to do it manually, I consider it better practice. If you still want to do it with jQuery, you do it like this:

$('input:button').addClass('button');
// Or to include <button> elements:
$('button, input:button').addClass('button');

// Text inputs:
$('input:text').addClass('text');
// And so on...

Blixt 2009-07-24 07:19:19

Answer 5

+1 A:

I wouldn't use jQuery unless you need it elsewhere as loading a library or framework for such a simple task seems overkill.

I.E.6 doesn't understand CSS attribute selectors, correct, looks like Javascript is the only way.

Perhaps you could play with this code:

Buttons=Parent.getElementsByTagName("input"); // "Parent" could be "document" or the Id. of a form, fieldset, div etc.
Button=0;
while(Button<Buttons.length){
    if(Buttons[Button].getAttribute("type")=="button"){
        Buttons[Button].className="Whatever_Style_We_Want";
    }
    Button++;
};

I've not tried or tested that but the snippet is something to play with. It may even work right out of the box!

Jay 2009-07-24 10:56:06

ansaurus

tags:

views:

answers:

How to apply a class to all button?

related questions