jQuery：获取每个选中的单选按钮并附加其 datasrc 值

Question

我在尝试使用 each() 两次时遇到问题。

我有一个单选按钮列表，每个按钮都有一个网站的 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/>​

我想检索每个选中的单选按钮，所以我这样做：

$("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 附加到它的 id 和值，它的 datasrc。例如：

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

当我再次尝试使用每一个时，我设法将其打印了几次。例如 john 将打印 4 次，maria 将打印 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

我解决了你的问题http://jsfiddle.net/3nvcj/

$(function() {

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

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

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

“id的数量”让我竖起耳朵。每个 id 在每个页面上只能出现一次。如果您在多个元素上使用相同的 id，则标记将是非法的。