Question

我正在制作一些模板，我将添加到我的页面

我有一些输入有一些数字，我需要的是当我点击按钮添加添加新元素到页面，并在删除删除该元素，这是我的代码

HTML

<div class="container">   
<div class="row box template">
        <label class="input box" for="foldername">
            <span class="icon-prepend input-index-number">1</span>
            <input type="text" class="input-folder-name" placeholder="Please article" />
            <button class="btn btn-no-borders button-remove" type="button">
                Delete
            </button>
        </label>
    </div>

    <div class="row box">
        <label class="input" for="foldername">
            <span class="icon-prepend input-index-number">1</span>
            <input type="text" class="input-folder-name" placeholder="Please enter article" />

        </label>
    </div>

       <div class="row">
         <button type="button" class="btn btn-primary button-add">Add article</button>
       </div>
</div>

JS

$(document).on("click", ".button-add", function () {
     var lastbox = $('.box').length;
     var indexNumber = lastbox - 1;
     $('.template label span').text(indexNumber);
    $('.template').clone()
        .show()
        .removeClass("template")
    .insertBefore('.row:last');
}).on("click", ".button-remove", function () {
    $(this).closest('.row').remove();
});

这是工作小提琴 http://jsfiddle.net/52VtD/9531/

我需要的是下一个，默认在类input-index-number中有一些数字，当我添加新元素时我想获得该数字并在该字段中添加新的计数数字。例如，如果有默认值数字2下一个添加元素必须有3等。但是，我有问题当我删除一些数字我还必须重新索引所有其他数字，如有1,2,3,4。当我删除3，数字4必须成为3请看看我现在的小提琴，你会看到我需要的东西

Answer 1

只需编写一个函数来正确更新索引，并在添加或删除行后调用它。

完整代码：

$(document).on("click", ".button-add", function () {
    var lastbox = $('.box').length;
    $('.template').clone()
    .show()
    .removeClass("template")
    .insertBefore('.row:last');
    updateIndexes();
}).on("click", ".button-remove", function () {
    $(this).closest('.row').remove();
    updateIndexes();
});

function updateIndexes() {
    $('.input-index-number:visible').each(function (index) {
        $(this).text(index + 1);
    });
}

Forked jsFiddle

Answer 2

您可以创建一个帮助方法来重新索引这些框，然后在添加或删除框时调用它。

var reindex = function() {
  $('.row.box:not(.template)').each(function(i) {
    $(this).find('.input-index-number').text(i + 1);
  });
}

添加一个盒子似乎对计算机来说会有一些工作，但它看起来更简单，更不容易出错。

Answer 3

    $(document).on("click", ".button-add", function () {
         var lastbox = $('.box').length;
        var t = $('.template').clone()
            .removeClass("template")
        .insertBefore('.row:last');
        $(".input-index-number",t).html($(".input-index-number").length-1);
    }).on("click", ".button-remove", function () {
        $(this).closest('.row').remove();
        $(".input-index-number").each(function(i)
        {
            $(this).html(i);
        });
    });

虽然你可以取消所有那些重复的模板div

http://jsfiddle.net/52VtD/9532/

计算Jquery中的元素数量

3 个答案: