Question

i got an anchor in the DOM and the following code replaces it with a fancy button. This works well but if i want more buttons it crashes. Can I do it without a for-loop?

$(document).ready(buttonize);   

function buttonize(){
    //alert(buttonAmount);

    //Lookup for the classes
    var button              =   $('a.makeabutton');
    var buttonContent       =   button.text();
    var buttonStyle         =   button.attr('class');
    var link                =   button.attr('href');
    var linkTarget          =   button.attr('target');
    var toSearchFor         =   'makeabutton';
    var toReplaceWith       =   'buttonize';
    var searchButtonStyle   =   buttonStyle.search(toSearchFor);


    if (searchButtonStyle != -1) {      

        //When class 'makeabutton' is found in string, build the new classname
        newButtonStyle      =   buttonStyle.replace(toSearchFor, toReplaceWith);
        button.replaceWith('<span class="'+newButtonStyle
                 +'"><span class="left"></span><span class="body">'
                 +buttonContent+'</span><span class="right"></span></span>');

        $('.buttonize').click(function(e){
          if (linkTarget == '_blank') {
            window.open(link);
          }
          else window.location = link; 
        });
    }
}

Answer 1

Use the each method because you are fetching a collection of elements (even if its just one)

var button              =   $('a.makeabutton');
button.each(function () {
    var btn = $(this);
    var buttonContent       =   btn.text();
    var buttonStyle         =   btn.attr('class');
    var link                =   btn.attr('href');
    var linkTarget          =   btn.attr('target');
    var toSearchFor         =   'makeabutton';
    var toReplaceWith       =   'buttonize';
    var searchButtonStyle   =   buttonStyle.search(toSearchFor);
    ...
};

the each method loops through all the elements that were retrieved, and you can use the this keyword to refer to the current element in the loop