Javascript 带有多个元素的JQuery问题

我在DOM中得到了一个锚，下面的代码用一个奇特的按钮替换了它。这工作得很好，但如果我想要更多的按钮，它就会崩溃。没有for循环我能做吗

$(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; 
        });
    }
}

$（文档）.ready（按钮化）；
函数按钮化（）{
//警报（按钮计数）；
//查找类
var按钮=$（'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 torereplacewith='buttonize'；
var searchButtonStyle=buttonStyle.search（toSearchFor）；
如果（searchButtonStyle！=-1）{
//在字符串中找到类“makeabutton”时，生成新的类名
newButtonStyle=按钮样式。替换（toSearchFor，toReplaceWith）；
按钮。替换为（“”）
+按钮内容+“”）；
$（'.buttonize'）。单击（函数（e）{
如果（linkTarget=='\u blank'）{
窗口。打开（链接）；
}
else window.location=链接；
});
}
}

这段代码返回一个jQuery对象，其中包含所有匹配的锚。您需要使用

对它们进行循环。每个
：

$(document).ready(buttonize);

function buttonize() {
    //alert(buttonAmount);
    //Lookup for the classes
    var $buttons = $('a.makeabutton');
    $buttons.each(function() {
        var button = $(this);
        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) {

            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;
            }); // end click
        } // end if

    }); // end each
}

$（文档）.ready（按钮化）；
函数按钮化（）{
//警报（按钮计数）；
//查找类
var$buttons=$（'a.makeabutton'）；
$buttons.每个（函数（）{
var按钮=$（此按钮）；
var buttonContent=button.text（）；
var buttonStyle=button.attr（'class'）；
var link=button.attr（'href'）；
var linkTarget=button.attr（'target'）；
var-toSearchFor='makeabutton'；
var torereplacewith='buttonize'；
var searchButtonStyle=buttonStyle.search（toSearchFor）；
如果（searchButtonStyle！=-1）{
newButtonStyle=按钮样式。替换（toSearchFor，toReplaceWith）；
按钮。替换为（“”）
+纽扣内容
+ '');
$（'.buttonize'）。单击（函数（e）{
如果（linkTarget=='\u blank'）{
窗口。打开（链接）；
}else window.location=链接；
})；//结束单击
}//如果结束，则结束
})//结束每一个
}
使用each方法，因为您正在获取元素的集合（即使它只是一个）

each方法循环检索到的所有元素，您可以使用
this
关键字引用循环中的当前元素（'a.makeabutton'）
返回元素集合，使用
按钮。每个（函数…）
dom看起来是这样的：




类用于颜色，脚本只用第一个元素的值替换它..耶！感谢演示：
$(document).ready(buttonize);

function buttonize() {
    //alert(buttonAmount);
    //Lookup for the classes
    var $buttons = $('a.makeabutton');
    $buttons.each(function() {
        var button = $(this);
        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) {

            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;
            }); // end click
        } // end if

    }); // end each
}

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);
    ...
};