Question

我正在尝试在克隆div之后将标题输出为Group 1，Group 2等。但是，当我尝试在单击按钮后设置组名时，它会给我第1组，而我希望第一个div为第1组，然后第一个克隆事件将包含第2组。我已经尝试了几种粘贴在SO上的方法但是没有给出我正在寻找的结果。

以下是您可以查看的jsfiddle http://jsfiddle.net/shafox/9xXfa/1/。

[HTML]

<div class="row-fluid">
<div class="container">
    <div class="">
        <span class="btn btn-primary addstage">Add Stage</span>
        <select id="selecttype">
            <option></option>
            <option value="1">League</option>
            <option value="2">Knockout</option>
        </select>
        <div class="leaguegrp">
            <div class="league">

                <div class="groupnum"></div>

                <span class="btn btn-primary addStage">Add Group</span>

            </div>
        </div>
    </div>
</div>

[JS]

        var i = 1;
$(".groupnum").each( function() {
    var i = 1;
    $(this).append("Group", +i);
    ++i;
    $(".addStage").click(function(){
        var leagueGroup = $(".league").last().clone();

        $(".leaguegrp").append(leagueGroup)
    });
});


$(".addstage").click(function() {
    $("#selecttype").show();
});
$("#selecttype").change(function() {
    $(".league")[$(this).val() == "1" ? 'show' : 'hide']("fast");
}).change();
$("#selecttype").change(function() {
    $(".knockout")[$(this).val() == "2" ? 'show' : 'hide']("fast");
}).change();
var grp = $(".groupnum").length;
//$(".groupnum").append("Group"+" "+ grp);
//console.log("Group"+" "+ grp);

[CSS]

#selecttype{display: none;}

Answer 1

看看这个小提琴：http://jsfiddle.net/9xXfa/2/

这不是最佳方法，但如果您不想更改代码的主要部分，只需在添加节点后添加此行。

leagueGroup.find('.groupnum').text('Group '+ (leagueGroup.index() + 1))

这将根据他在DOM中的索引设置一个组号。

编辑：

我实际上没有看到你已经保存了var，所以你可以这样做：

leagueGroup.find('.groupnum').text('Group '+ i)
i++

使用clone（）克隆后如何增加div值

1 个答案: