jQuery：チェックされた各ラジオボタンを取得し、そのdatasrc値を追加します

Question

each（）を2回使用しようとすると問題が発生します。

私はラジオボタンのリストを持っていますが、それぞれにウェブサイトのdatasrcがあります。

例：私は、それぞれのラジオボタンをチェックし取得したい

<input type="radio" checked datasrc="www.john.com" id="John">John<br/> 
<input type="radio" checked datasrc="www.maria.com" id="Maria">Maria<br/> 
<input type="radio" datasrc="www.joe.com" id="Joe">Joe<br/>​ 

ので、私はこれを行う：私はすべてにチェックラジオボタンを取得するときに今、私はIDとそれを追加したい

$("input:radio").each(function(){ 

var name = $(this).attr("id"); 


    if($("[id="+name+"]:checked").length == 1) 
    { 
     var src = $('#' + name).attr("datasrc")                                                                                                                  

     console.log(name); 
     console.log(src);       

    }                                                                                                                   
}); 

をそのIDとその値、そのdatasrc。例えば：私は再びそれぞれを使用してみました場合は

<div id="John">www.john.com</div> 
<div id="Maria">www.maria.com</div> 

は、私はそれが印刷され得るために管理しますが、数回取得します。例えば、ジョンは4回印刷し、マリアは5回（IDの量）を印刷します。例えば

：

$("input:radio").each(function() { 

    var name = $(this).attr("id"); 

    if ($("[id=" + name + "]:checked").length == 1) { 
     var src = $('#' + name).attr("datasrc") 

     var html = ""; 
     for (i = 0; i < name.length; i++) { 
     html += "<div id='" + name + "'>" + src + "</div>" 
     } 

     $("body").append(html); 


    } 

}); 

が印刷されます：私は私が間違ってやっている何

www.john.com 
www.john.com 
www.john.com 
www.john.com 
www.maria.com 
www.maria.com 
www.maria.com 
www.maria.com 
www.maria.com 

？

Answer 1

それぞれの内部にforループをネストしているので、forループの結果は各ループと同じ回数だけ実行されます。forループ、単純な配列、およびeach()は必要ありません仕事：

編集：いつでも使用できるようにしました。私はあなたのスクリプトが過度に次のように単純化することができると思い

var getUrls = function() { 

    var urls = []; 

    $('input:radio').each(function() { 

     var $this = $(this), 
      id = $this.attr('id'), 
      url = $this.attr('datasrc'); 

     if ($(this).prop('checked')) { 
      urls.push('<div class="' + id + '">' + url + '</div>'); 
     } 

    }); 

    return urls; 

}; 

$('body').append(getUrls().join('')); 

Answer 2

「idの量」は私の耳を刺す。各IDは、すべてのページに1回しか指定できません。複数の要素で同じIDを使用すると、マークアップは不正になります。

Answer 3

：

$("input:radio").each(function() { 

    // save for re-use 
    var $this = $(this); 

    // no need for jquery for javascript properties 
    // 'this' is the DOM element and has a 'checked' property 
    if (this.checked) { 
     var src = $this.attr('datasrc'); 
     // you'd have to prefix the generated DIV id 
     // otherwise you'll end up with duplicate IDs 
     $('body').append("<div id='div" + this.id + "'>" + src + "</div>"); 
    } 

});​ 

DEMO

Answer 4

私は笑一度それを使用しますhttp://jsfiddle.net/3nvcj/

$(function() { 

    $(':checked').each(function(index, element) { 

     $('#result').append($('<div>').attr('id', $(element).attr('id')).text($(element).attr('datasrc'))); 
    }); 
});