如何处理多个div内的多个单选按钮

Question

我在容器中的输入字段很少，用户可以将这些字段相乘。我需要根据容器更改输入字段的名称。

<div class="stations"> 
<input type="radio" name="pp[prc][0][station][0][id]"> 
<input type="radio" name="pp[prc][0][station][1][id]"> 
</div> 

这是我的HTML表单。

$(".stations").each(function(sIndex){ 
//Loop thru all .station 
    $("input:radio", $(this)).each(function(rIndex){ 
    //Loop thru all radio buttons inside that container and change their names accordingly 
    $("input:radio", $(this)).attr('name','pp[prc]['+sIndex+'][stations]['+rIndex+'][id]'); 
    }); 
}); 

当我这样做，出于某种原因，当用户重复<div class="station">，其内容单选按钮的名称不会随之改变。我在哪里做错了？

Answer 1

看起来你有选择器的一些问题。试着这样说：

//Loop through each .station 
$(".stations").each(function(sIndex){ 

    //Loop through each radio buttons inside the container 
    $(this).find("input:radio").each(function(rIndex){ 

     // Change the radio name attribute 
     $(this).attr('name','pp[prc]['+sIndex+'][stations]['+rIndex+'][id]'); 
    }); 
}); 

Working jsFiddle

Here's a jsFiddle with the names on the screen for quicker viewing.

Answer 2

您正在使用$(selector, context)和input元素不能有孩子，你应该在代码：

$(this).attr('name', '...');