如何處理多個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', '...');