Jquery 生成循环中的文本和订单号

我有一个跳水动作，点击显示。当您单击AddPerson按钮时，它将克隆并添加.loop div

我需要的是在循环div（person1）中有一个标题文本，我需要为每个循环更新这个文本。例如，个人1，个人2，个人3

这是我的代码和

$(function () {
    clicks = 0;
    $('div.test').on('click', function () {
        $('.attnd2').show();
        $('div.loop').show();
        if ($('div.loop').length < 5) {
            clicks++;
            if (clicks > 1) {
                newLoopDiv = $($('div.loop')[0]).clone().appendTo(".container");
                $('input', newLoopDiv).each(function (index, element) {
                    $(element).attr('name', $(element).attr('name') + clicks);
                });
            } else {
                newLoopDiv = $($('div.loop')[0]).appendTo(".container");
                $('input', newLoopDiv).each(function (index, element) {
                    $(element).attr('name', $(element).attr('name') + clicks);
                });
            }
        }
        $(".remove").click(function () {
            $(this).closest('.loop').remove();
        });
    });
});

$（函数（）{
点击次数=0；
$（'div.test'）。在（'click'，函数（）{
$（'.attnd2'）.show（）；
$（'div.loop'）.show（）；
if（$（'div.loop'）。长度<5）{
点击++；
如果（单击>1）{
newLoopDiv=$（$（'div.loop'）[0]）.clone（）.appendTo（“.container”）；
$（'input'，newLoopDiv）.each（函数（索引，元素）{
$（element）.attr（'name'，$（element）.attr（'name'）+单击）；
});
}否则{
newLoopDiv=$（$（'div.loop'）[0]）.appendTo（“.container”）；
$（'input'，newLoopDiv）.each（函数（索引，元素）{
$（element）.attr（'name'，$（element）.attr（'name'）+单击）；
});
}
}
$（“.remove”）。单击（函数（）{
$（this）.closest（'.loop'）.remove（）；
});
});
});

如果您想更改strong中的名称：

// I prefer this for readability
$(newLoopDiv).find('strong')[0].html( 'Person '+ clicks );
// but this is more dynamic
$(newLoopDiv).find('strong')[0].html( $(element).find('strong')[0].replace("1", clicks) );

要更新所有输入名称（因为这些名称是错误的，请检查来源：

// In your loop with the inputs:
$(element)[0].name = $(element)[0].name.replace("1", clicks);

---

如果为输入指定一个类似数组的名称，则其分配更容易：

<input name="example[]" value="this is the first" />
/* then you click */
<input name="example[]" value="this is the 2nd" />
/* then you click */
<input name="example[]" value="this is the 3rd" />

可通过foreach循环访问：

foreach($_POST['example'] as $key =>$value){
    echo $value;
    echo '<br />';
    echo $_POST['otherinputName'][ $key ] ;
}

foreach（$\u POST['example']作为$key=>$value）{
echo美元价值；
回声“
”；
echo$_POST['otherinputName'][$key]；
}

这还有另一个好处，如果你想在第二次时

.remove（）

，则不需要重新计算。$\u POST值只会得到一个较小的值，只有“这是第一次”和“这是第三次”，而你的增量中没有要修复的间隙

HTML:（注意

#循环

，完全没有内容）：

…是的，就是这样。试试这个：

newLoopDiv = $($('div.loop')[0]).appendTo(".container");
            $(newLoopDiv).children('strong').text("Person "+clicks);//Add this Line
            $('input', newLoopDiv).each(function (index, element) {
                $(element).attr('name', $(element).attr('name') + clicks);                    
            });

---

工作

请确保缩进正确输入正在按顺序生成名称属性。我需要在这里更改标记中的静态文本。用更多信息更新我的答案您不希望这样。这样名称是

name1

和

name12

和

name13

@Martijn-oh真的吗？我不这么认为nk所以。你应该在控制台中检查代码和属性。原始输入有

name1

，添加

+单击将在其后添加增量。除非我丢失了something@Martijn您可能遗漏了一些内容：）@DGS，如果我们在代码中发现一些错误（OP最初没有发现）我们在答案中修正了它，它使我们的答案更有价值；）你不要这个。您正在更新
strong
元素，循环的每一次运行（因此10个输入意味着它更新了strong 10次）超出循环=更好。您总是希望循环尽可能少地执行：）
<div class='container' id="loops"></div>
<div class="test">Add person</div>

var c = 0;

function HTMLloop(c) {
    return '<div class="loop">\
              <strong>Person ' + c + '</strong><br/> \
              <input type="text" name="firstName' + c + '"/> \
              <input type="text" name="lastName' + c + '"/> \
              <input type="text" name="mail' + c + '"/> \
              <input type="text" name="company' + c + '"/> \
           </div>';
}

$('.test').on('click', function () {
    if (c<5) $('#loops').append( HTMLloop(++c) );
});

newLoopDiv = $($('div.loop')[0]).appendTo(".container");
            $(newLoopDiv).children('strong').text("Person "+clicks);//Add this Line
            $('input', newLoopDiv).each(function (index, element) {
                $(element).attr('name', $(element).attr('name') + clicks);                    
            });