代码之家 › 专栏 › 技术社区 › Brandon

使用jquery附加多个项目

jquery javascript

Brandon · 技术社区 · 15 年前

我从这个标记开始:

<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[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>

我尝试使用这个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);
    });
});

所以有几个问题:

附加标签是可行的,但我的克隆文本框却不行。

标签没有文本。我好像找不到那房子。有人能告诉我是什么吗?

我不知道如何将标签和文本框包装在一个分区和一个范围内。如果我尝试

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

它输出[object htmllabelement]而不是实际的标签。如果我试图将它们分割成多个APPEND语句,它会自行终止DIV和SPAN。我不熟悉jquery/javascript,所以我不太确定自己做错了什么。

5 回复 | 直到 15 年前

user180100 15 年前

示例克隆整个块(但添加一个项类),因为我认为它对未来更为健壮(如果您更改项的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>

tvanfosson 15 年前

我想我会找到一种方法从标记中的现有数字中提取下一个数字,而不是依赖于保持变量同步。另外,我认为你只需要把你的附属物套好,就能得到你想要的容器。

$(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;
    });
});

Matt Ball 15 年前

从“怎么了”开始,你混合了本地的dom调用、jquery和其他一些东西(我不知道什么是 <%= Items.Count - 1 %> 可能是-php吗?)我会把最后一个放在一边,因为听起来它对你有用。否则,如果要使用jquery,请尽量使用它的方法。

标签文本的“属性”只是jquery获取/设置的值。 value() 方法。

要附加标签,我建议您这样做:

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

我知道append可以接受文本、jquery对象或dom元素,但我个人更喜欢使用字符串来完成这一切。如果您不愿意,可以这样做:

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

等等。

原因在于

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

没有给你想要的是,用字符串连接JavaScript对象,它(如Java)在连接之前自动将对象转换为字符串。

由于Tvanfosson的答案应该包含这部分内容,所以我将剩下的部分不完整。

Brandon 15 年前

使用函数构建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);
    };
});

Adam Bard 15 年前

var oldDiv = $('whatever');//Get div here somehow
var newHTML = $( oldDiv ).html();
newHTML.replace(/\[[0-9]+\]/g, '['+count+']');
newHTML.replace(/#[0-9]+/g, '#'+(count+1));    
var newDiv = $('<div></div>').html( newHTML );

这将创建一个新的DIV,从oldDIV中获取HTML,并对[index]和数字区域执行两个regex替换。我没有测试过它,但是它应该可以在很少修改的情况下工作。