Question

嗨我试图为每个表单元素分配一个唯一的ID号

继承人正在研究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]street[0]state等

第二个位置 [1]street[1]state等

我是jQuery的新手，所以如果你可以编辑小提琴来实现这一点，或者你可以向我解释像一个六岁的孩子那将是伟大的。

谢谢

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++) + ']'左右括号中的字符串中/ p>

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

http://jsfiddle.net/ffDEg/

Answer 2

您可以通过以下方式为表单元素指定唯一ID。

$(document).ready(function () {
    var elements = $('form input'),
    i;
    for (i = 0; i < elements.length; i++) {
        elements[i].id = "input-" + i;
    }
});

这给出了“＃input-0”，“＃input-1”等的值/

您可以通过示例测试来验证这是否有效，例如：

$('#input-1').css('background-color', 'red');

在jquery中分配唯一ID

2 个答案: