jQuery UI动态图标

Question

I have a set of buttons and Im trying to instead of setting individual icons for them, use an attribute and one-for-all function to set their icon. Here is an example of my button :

<button title="New Project" id="New" class="Nx button" type="document"></button>

and here is sort of what I want to achieve :

$('.button').button({
   icons: { primary:'ui-icon-'+$(this).attr("type") },
   text:false
});

but it doesnt work. so pretty much I want to have an internal reference to the element's "type" attribute to be able to set the icon

Answer 1

Here is a demo of how I would go about it. I have also provided the code below. Let me know if you need anything else.

CODE:

$(document).ready(function(){
    $("button").each(function(index,element){
       $(element).button({
            icons: {
                primary: "ui-icon-" + $(this).attr('type')
            },
                text:false
            })
    });
});

DEMO: http://jsfiddle.net/sZdd8/11/