いくつかの要素の問題を伴うJQuery

Question

DOM内にアンカーがあり、次のコードではこれをファンシーボタンに置​​き換えます。これはうまくいきますが、もっとたくさんのボタンが必要な場合はクラッシュします。 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

はインクルード各メソッドは、すべての要素をループ

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

あなたは要素のコレクションを取得しているため、各メソッドを使用します（たとえそのわずか1）

ループ内の現在の要素を参照するために 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 
}