Javascript 使用jQuery追加多个项

我从以下标记开始：

<div>
  <span>
    <label for="Item[0]">Item #1</label>
    <input type="text" value="" name="Item" id="Item[0]"/>
  </span>
</div>

项目#1

在每个按钮上单击，我想添加另一个部分，与上面的部分完全相同，但索引增加

<div>
  <span>
    <label for="Item[0]">Item #1</label>
    <input type="text" value="" name="Item" id="Item[0]"/>
  </span>
</div>
<div>
  <span>
    <label for="Item[1]">Item #2</label>
    <input type="text" value="" name="Item" id="Item[1]"/>
  </span>
</div>

项目#1
项目#2

我正在尝试使用以下javascript：

 $(document).ready(function(){

    var count = <%= Items.Count - 1 %>;

    $('#AddItem').click(function(e) {
        e.preventDefault();
        count++;

        var tb = $('#Item[0]').clone().attr('id', 'Item[' + count + ']');

        var label = document.createElement('label')
        label.setAttribute('For', 'Item[' + count + ']')

        $('#ItemFields').append(label);
        $('#ItemFields').append(tb);
    });
});

$（文档）.ready（函数（）{
var计数=；
$（“#添加项”）。单击（函数（e）{
e、 预防默认值（）；
计数++；
var tb=$（'#项[0]'）.clone（）.attr（'id'，'Item['+count+']）；
var label=document.createElement（'label'）
label.setAttribute（'For'，'Item['+count+']'））
$（'#ItemFields'）。追加（标签）；
$（'#ItemFields'）。追加（tb）；
});
});

因此，有几个问题：

添加标签是可行的，但我克隆的文本框却不行

标签没有文本。我似乎找不到那房子的房子。谁能告诉我是什么吗

我不知道如何将标签和文本框包装在一个div和span中。如果我尝试

$('#ItemFields').append('<div><span>' + label + tb + '</span></div>');

$（'#ItemFields'）。追加（''+label+tb+''）；

---

它输出[object HTMLLabelElement]，而不是实际的标签。如果我尝试将它们拆分为多个append语句，它会自动终止div和span。我不熟悉jQuery/Javascript，所以我不太确定我做错了什么。

我想我应该找到一种方法，从标记中的现有数字中提取下一个数字，而不是依赖于保持变量同步。另外，我认为你只需要适当地嵌套你的附属物就可以得到你想要的容器

$(document).ready(function(){

    $('#AddItem').click(function(e) {
        var count = $('[name=Item]:last').attr('id').replace(/Item\[/,'').replace(/\]/,'');
        count = Number(count) + 1;

        var newItemID = 'Item[' + count + ']';

        var tb = $('#Item[0]').clone();
        tb.attr('id', newItemID );

        var label = $('<label for="' + newItemID + '">Item #' + count + '</label>');

        var container = $('<div></div>');

        $('<span></span>').append(label)
                          .append(tb)
                          .appendTo(container);

        $('#ItemFields').append(container);
        return false;
    });
});

$（文档）.ready（函数（）{
$（“#添加项”）。单击（函数（e）{
变量计数=$（'[name=Item]：last'）.attr（'id'）.replace（/Item\[/，''）.replace（/\]/，''）；
计数=数（计数）+1；
var newItemID='Item['+count+']'；
var tb=$（“#项[0]”）。clone（）；
tb.attr（'id'，newItemID）；
变量标签=$（'Item#'+count+''）；
变量容器=$（''）；
$（''）。附加（标签）
.追加（tb）
.附在（容器）上；
$（'#ItemFields'）。追加（容器）；
返回false；
});
});

从“怎么了”开始，您混合了本机DOM调用、jQuery和其他东西（我不知道

是什么-PHP，可能吧？）。我不去管最后一个，因为听起来它对你有用。否则，如果要使用jQuery，请尽量坚持使用它的方法

标签文本的“属性”只是值，由jQuery

value（）

方法获取/设置

要附加标签，我建议您按照以下方式执行：

$('#ItemFields').append('<label for=Item["' + count + ']">'+ '</label>')

$（'#ItemFields'）。追加（''+''）

我知道append可以接受文本、jQuery对象或DOM元素，但我个人更喜欢使用字符串。如果您不愿意，您可以这样做：

$('#ItemFields').append($('<label></label>')
    .attr('for', 'Item["' + count + ']')
    .value('your label text here'));

$（'#ItemFields'）。追加（$（''）
.attr（'for'，'Item['+count+']'））
.value（“此处为您的标签文本”）；

等等

原因是

$('#ItemFields').append('<div><span>' + label + tb + '</span></div>');

$（'#ItemFields'）。追加（''+label+tb+''）；

你想要的不是将Javascript对象与字符串连接起来，而字符串（如Java）会在连接之前自动将对象转换为字符串

---

由于tvanfosson的答案应该涵盖了这一点，因此我将此答案的其余部分保留为不完整部分。

使用函数构建html；如果结构简单，则将其组装为字符串更容易：

$(document).ready(function(){

    var count = <%= Items.Count - 1 %>;

    $('#AddItem').click(function(e) {
        e.preventDefault();
        count++;

        $('#ItemFields').append(create_item(count));
    });


    function create_item(i) {
        return $(['<div><span>'
                ,'<label for="Item[', i, ']">Item #', i, '</label>'
                ,'<input type="text" value="" name="Item" id="Item[', i ,']"/>'
            ,'</span></div>'].join(''), document);
    };
});

$（文档）.ready（函数（）{
var计数=；
$（“#添加项”）。单击（函数（e）{
e、 预防默认值（）；
计数++；
$（'#ItemFields'）。追加（创建#item（count））；
});
函数创建_项（i）{
返回$（[''）
“项目”，我，“我”
,''
，''。加入（''），文件）；
};
});

var oldDiv=$（'whatever'）；//在这里以某种方式获取div
var newHTML=$（oldDiv.html（）；
newHTML.replace（/\[[0-9]+\]/g，['+count+']）；
newHTML.replace（/#[0-9]+/g，'#'+（count+1））；
var newDiv=$（''）.html（newHTML）；

---

这将创建一个新的div，从oldDiv中获取HTML，并对[index]和#number区域执行两个正则表达式替换。我还没有测试过它，但它应该可以工作，只需做一些修改。

示例克隆整个块（但添加一个item类），因为我认为它对未来更为健壮（例如，如果更改某个项目的HTML）和处理标签的文本：

<html>
<head>
  <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
  <title>Demo</title>
  <script type="text/javascript" src="jquery-1.3.2.min.js"></script>
  <script type="text/javascript">
  $(document).ready(function(){
    $('#AddItem').click(function(e) {
      e.preventDefault();

      var count = $('.item').length;
      var id = 'Item[' + count + ']';
      var item = $('.item:first').clone();
      item.find('input:first').attr('id', id);
      item.find('label:first').attr('for', id)
          .html('Item #' + (1+count));
      item.appendTo('#ItemFields');
    });
  });
  </script>
</head>
<body>
  <input type="button" id="AddItem" value="Add" />
  <div id="ItemFields">
    <div class="item">
      <span>
        <label for="Item[0]">Item #1</label>
        <input type="text" value="" name="Item" id="Item[0]"/>
      </span>
    </div>
  </div>
</body>
</html>

演示
$（文档）.ready（函数（）{
$（“#添加项”）。单击（函数（e）{
e、 预防默认值（）；
变量计数=$（'.item'）。长度；
变量id='Item['+count+']'；
var item=$（'.item:first'）.clone（）；
item.find（'input:first'）.attr（'id'，id）；
item.find（'label:first'）.attr（'for'，id）
.html（'Item#'+（1+计数））；
item.appendTo（“#ItemFields”）；
});
});
项目#1

谢谢你的回答。我不知道我不应该将本机DOM与Jquery混合，我实际上是在遵循另一个SO问题作为指导，它使用Jquery，但在常规javascript中创建了元素。哦，其他东西实际上是C#。这不是一个“不应该”的问题”“是的。什么都不会打破。但是，更好的做法是避免混合来自提供重叠功能的两个不同API的调用。如果您已经在使用jQuery，为什么不尽可能地使用它呢？回复：“其他东西”——接受tvanfosson的建议，使用Javascript计算

count

的值。感谢您的回复。我尝试了你的代码，但它生成了标记：Name#1它有一个自终止的跨度，没有文本框。此外，计数器没有递增。.replace中的第一个参数也应该用引号括起来吗？我没有考虑在span后面附加标签和输入。我已更新以分离div和span的创建，并按正确的顺序组合它们。否

<html>
<head>
  <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
  <title>Demo</title>
  <script type="text/javascript" src="jquery-1.3.2.min.js"></script>
  <script type="text/javascript">
  $(document).ready(function(){
    $('#AddItem').click(function(e) {
      e.preventDefault();

      var count = $('.item').length;
      var id = 'Item[' + count + ']';
      var item = $('.item:first').clone();
      item.find('input:first').attr('id', id);
      item.find('label:first').attr('for', id)
          .html('Item #' + (1+count));
      item.appendTo('#ItemFields');
    });
  });
  </script>
</head>
<body>
  <input type="button" id="AddItem" value="Add" />
  <div id="ItemFields">
    <div class="item">
      <span>
        <label for="Item[0]">Item #1</label>
        <input type="text" value="" name="Item" id="Item[0]"/>
      </span>
    </div>
  </div>
</body>
</html>