0

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;}
4

1 に答える 1

0

このフィドルを見てください：http://jsfiddle.net/9xXfa/2/

これは最適な方法ではありませんが、コードの大部分を変更したくない場合は、ノードを追加した後にこの行を追加してください。

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

これにより、DOM のインデックスに応じてグループ番号が設定されます。

編集 ：

私は実際にあなたがすでに変数を保存していることを知りませんでしたので、代わりにこれを行うことができます:

leagueGroup.find('.groupnum').text('Group '+ i)
i++
于 2013-05-15T23:22:49.443 に答える