有幾個元素的JQuery問題

Question

我在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; 
     }); 
    } 
} 

Answer 1

使用每一種方法，因爲你獲取元素的集合（即使它只是一個）

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

每個方法遍歷所有元素已檢索到，並且您可以使用this關鍵字來引用循環中的當前元素

Answer 2

var button    = $('a.makeabutton'); 

此代碼返回包含所有匹配錨一個jQuery對象。你需要通過他們循環使用.each：

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