如何使用jQuery递增属性中的数字？

Question

我有一个HTML片段，如下所示，我想获取“article-form” div，克隆它，并递增属性“for”，“id”和“name”的数字。

<div class="article-form">
    <label for="id_form-0-section">Section:</label>
    <select id="id_form-0-section" name="form-0-section">
        <option selected="selected" value="">---------</option>
        <option value="1">News</option>
        <option value="2">Originals</option>
    </select>
    <label for="id_form-0-slug">Slug:</label>
    <input type="text" maxlength="255" name="form-0-slug" id="id_form-0-slug">
    <input type="hidden" id="id_form-0-collection" name="form-0-collection">
    <input type="hidden" id="id_form-0-order" name="form-0-order">
    <input type="hidden" id="id_form-0-id" name="form-0-id">
</div>

我已经完成了克隆部分，但是我需要遍历内部具有属性 for、id 和 name 的元素。

var $articeForm = $('.article-form').clone();

让我补充一下，增量部分不是问题。我的计划是按照以下方式进行操作。我不确定以属性遍历的最佳方式是什么。

var newNumber = parseInt($('#id_form-0-id').attr('id').split('-')[1]) + 1;

还有一件事，它从0开始其实没有什么意义，在某些情况下它可以从5开始，接下来的字段应该是6。

- Jason Christa

---

你是否混淆了变量名？$varName 是 PHP 的变量名，而你正在 JavaScript 中使用它。 - jpabluz

在Javascript中，使用以$开头的变量名是有效的，并且是表示该变量是jQuery对象的一种很好的方式。 - nickf

@jpabluz - 不，这种方式给JavaScript变量命名是可以接受的。此外，将$附加到存储jQuery对象的任何变量前面是一个好习惯。 - James Wiseman

Answer 1

您可以使用一些正则表达式和parseInt()来实现此功能。例如：

element.attr('name', element.attr('name').replace(/(.*form\-)(\d+)(\-.*)/, function(f, p1, p2, p3) {
    return p1 + (parseInt(p2) + 1) + p3;
}));

然而，有一个重要的限制：在jQuery中克隆输入元素并更改名称属性在IE6/7中无法正常工作

- BalusC

---

哇，这是一些警告，但在这种情况下，我可以确保只使用FF、Chrome和Safari。 - Jason Christa

Answer 2

var counter = 0;

$('myElement').each (function(index)) {
    $(this).attr('id'+counter);
    counter++;
});

- Catfish

Answer 3

你可能想要保留一个变量，以告诉你到目前为止你已经创建了多少个克隆。

  var count = 0;

然后每次你克隆时都会增加计数。

   count++;
   $articleForm.children().each(function(){
          newId = $(this).attr("id") + count;
          $(this).attr("id", newId);
   });

- Vincent Ramdhanie

---

你需要将计数变量放在each函数内部，这样它就会在每次找到$articleForm的子元素后递增。 - Catfish

@catfish，我认为您不希望表单上的每个项目都有不同的ID。每个articleForm将有一个ID，其所有子元素将共享该ID。因此，articleForm2将具有ID label2 的标签，依此类推。 - Vincent Ramdhanie

Answer 4

假设您的页面有一个区域，可以容纳这些克隆的 div:

<div id="articles"></div>

从一个页面宽的计数器变量开始：

<script type="text/javascript">
    var articleFormCount = 0;
<script>

创建一个函数，为您构建HTML：

<script type="text/javascript">
    function buildArticleFormDiv()
    {
        var html = "<div class=\"article-form\">" + 
        "<label for=\"id_form-" + articleFormCount + "-section\">Section:</label>" + 
        "<select id=\"id_form-" + articleFormCount + "-section\" name=\"form-" + articleFormCount + "-section\">" +
        "<option selected=\"selected\" value=\"\">---------</option>" +
        "<option value=\"1\">News</option>" +
        "<option value=\"2\">Originals</option>" +
        "</select>" +
        "<label for=\"id_form-" + articleFormCount + "-slug\">Slug:</label>" +
        "<input type=\"text\" maxlength=\"255\" name=\"form-" + articleFormCount + "-slug\" id=\"id_form-" + articleFormCount + "-slug\">" +
        "<input type=\"hidden\" id=\"id_form-" + articleFormCount + "-collection\" name=\"form-" + articleFormCount + "-collection\">" +
        "<input type=\"hidden\" id=\"id_form-" + articleFormCount + "-order\" name=\"form-" + articleFormCount + "-order\">" +
        "<input type=\"hidden\" id=\"id_form-" + articleFormCount + "-id\" name=\"form-" + articleFormCount + "-id\">" +
        "</div>";

        articleFormCount++;

        $("div#articles").append(html);
    }
</script>

页面加载时调用该函数：

<script type="text/javascript">
    $(document).ready(function()
    {
        buildArticleFormDiv();
    });
</script>

然后，无论您使用什么机制来添加新的div（比如说，一个超链接click事件），都要调用buildArticleFormDiv()函数。

- Tim S. Van Haren

Answer 5

这是我目前想出来的解决方案。有什么地方看起来非常不对吗？

   function incAttrName(name) {
        return name.replace(/(.*form\-)(\d+)(\-.*)/, function(f, form, number, label) {
            return form + (parseInt(number) + 1) + label;
        });
    };

    $articleForm.find('[for]').attr('for', function() {
        var name = $(this).attr('for');
        return incAttrName(name);
    });

    $articleForm.find('[id]').attr('id', function() {
        var name = $(this).attr('id');
        return incAttrName(name);            
    });

    $articleForm.find('[name]').attr('name', function() {
        var name = $(this).attr('name');
        return incAttrName(name);            
    });

- Jason Christa