Javascript 计算Jquery中的元素数

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

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

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>

这是小提琴

---

我需要的是下一个，在类输入索引号的默认值中有一些数字，当我添加新元素时，我想获得该数字并在该字段中添加新计数的数字。例如，如果在默认值中有数字2，则下一个添加的元素必须有3等。但是，我在删除一些数字时遇到问题，我还必须重新索引所有其他数字，就像是有1，2，3，4。当我删除3时，数字4必须变成3，等等。请看一下我现在的小提琴，你会看到我需要什么

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

完整代码：

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

---

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

完整代码：

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

---

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

完整代码：

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

---

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

完整代码：

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

---

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

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

---

在添加框时，计算机似乎需要做更多的工作，但似乎更简单，更不容易出错。

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

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

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

---

在添加框时，计算机似乎需要做更多的工作，但似乎更简单，更不容易出错。

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

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

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

---

在添加框时，计算机似乎需要做更多的工作，但似乎更简单，更不容易出错。

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

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

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

当添加一个盒子时，计算机似乎需要做更多的工作，但它似乎更简单，更不容易出错

    $(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

尽管您可以删除所有那些重复的模板div

尽管您可以删除所有那些重复的模板div

尽管您可以删除所有那些重复的模板div

---

小点-为什么要过滤掉模板？如果不这样做，你就不需要在索引中添加1。我可以用innerHTMl添加html吗？html没有模板，你可以做那种摆弄，用jquery创建html吗，txanks@Gorostas我不知道你的意思。您可以通过只使用

$（''）.insertBefore（'.row:last'）来避免使用模板元素。这就是你的意思吗？小问题-为什么要过滤掉模板？如果不这样做，你就不需要在索引中添加1。我可以用innerHTMl添加html吗？html没有模板，你可以做那种摆弄，用jquery创建html吗，txanks@Gorostas我不知道你的意思。您可以通过只使用
$（''）.insertBefore（'.row:last'）来避免使用模板元素。这就是你的意思吗？小问题-为什么要过滤掉模板？如果不这样做，你就不需要在索引中添加1。我可以用innerHTMl添加html吗？html没有模板，你可以做那种摆弄，用jquery创建html吗，txanks@Gorostas我不知道你的意思。您可以通过只使用
$（''）.insertBefore（'.row:last'）来避免使用模板元素。这就是你的意思吗？小问题-为什么要过滤掉模板？如果不这样做，你就不需要在索引中添加1。我可以用innerHTMl添加html吗？html没有模板，你可以做那种摆弄，用jquery创建html吗，txanks@Gorostas我不知道你的意思。您可以通过只使用
$（''）.insertBefore（'.row:last'）来避免使用模板元素。这就是你的意思吗？