jquery - 在 jquery 中分配唯一 ID

Question

嘿，我正在尝试为每个表单元素分配一个唯一的 ID 号

这是我正在处理的 fiddle http://jsfiddle.net/d0okie0612/22cTn/

这是输出的 HTML

<div id="container">
  <div id="top_form">
    <form>
      Street: <input class="street" name="[][street]" id="form_element" type="text">               <br><br>
      City: <input class="city" name="[][city]" id="form_element" type="text">
      <select>
        <option value=" ">State</option>
        <option value="ca">CA</option>
        <option value="az">AZ</option>
        <option value="de">DE</option>
       </select>
       Zip: <input name="[][zipcode]" type="text"><br /><br />
     </form>
    </div>
  </div>

    <br />
       <a href="#" id="awsomeButton">+ Add Loction</a>
    <br />
     <br />
   <button id="submit_btn">Submit</button>

​

这是 jquery

var tpl = ""
+ "<div id='location_div_<%= id %>'><h1>My Location #<%= id %></h1></div>";

var newId = new Date().getTime();
var template = _.template(tpl);
var compiled = template({id: newId});

var addedForm = "<div id='added_form'>"
+ "<a href='#' class='close_btn'>x</a>"
+ "Street: <input name='[][street]' type='text'>"
+ "<br /><br />"
+ "City: <input name='[][city]' type='text'>"
+ "<select>"
+ "<option value=' '>State</option>"
+ "</select>"
+ "Zip: <input name='[][zipcode]' type='text'>"
+ "</div>"


$('#awsomeButton').on('click', 
function(e){
    $(addedForm).hide().appendTo('form').fadeIn('slow');

});

$('.close_btn').live('click', function(event){
event.preventDefault();
$(this).parents('div#added_form:first').fadeOut('slow', function(){
    $(this).remove();    

});
});

所以基本上我想要它，所以它上面写着name='[][street]'

我希望在检查元素时从 newID 生成的唯一 ID 号显示在 [] 中。

例如

第一个位置 [0]街道[0]州等

第二个地点 [1]街道[1]州等

我对 jQuery 很陌生，所以如果你可以编辑 fiddle 来实现这一点，或者你可以像一个六岁的 child 一样向我解释，那就太好了。

谢谢 ​

Answer 1

你可以用replace(regex,newvalue)来做到这一点

var x = 0
$('#awsomeButton').on('click', function(e) {
    $(addedForm.replace(/[[]]/g, '[' + (x++) + ']')).hide().appendTo('form').fadeIn('slow');
});

它将用 [x] 替换 []，同时自动递增数字。

http://jsfiddle.net/HDUvG/

如果这对您来说太难理解，您可以执行拆分/连接 - 它将在存在 [] 的地方拆分为数组，然后将其重新连接成一个用括号将数字括起来的字符串 '[' + (x++) + ']'

$(addedForm.split('[]').join('[' + (x++) + ']')).hide().appendTo('form').fadeIn('slow');

http://jsfiddle.net/ffDEg/