如何使用 jquery 增加带有数字的属性？答案

【问题标题】：How do I increment attributes with numbers using jquery?如何使用 jquery 增加带有数字的属性？
【发布时间】：2010-02-08 15:36:08
【问题描述】：

我有一个 HTML sn-p 如下，我想获取 'article-form' div，克隆它，并增加属性 for、id 的数字em> 和名称。

<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 和 属性名字。

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

让我补充一下，增量部分不是问题。我打算做以下事情。我不确定按属性遍历的最佳方法是什么。

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

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

【问题讨论】：

你在混合变量名吗？ $varName 是 PHP，你在 javascript 上使用它。
在变量名的开头使用$ 是有效的Javascript，也是表示该变量是一个jQuery 对象的好方法。
@jpabluz - 不，以这种方式命名 JavaScript 变量是可以接受的。此外，将 $ 附加到存储 jQuery 对象的任何变量的前面是一种很好的做法。

标签： javascript jquery

【解决方案1】：

您可以为此获取一点正则表达式和parseInt()。例如

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

然而，只有一个巨大的警告：Changing name attr of cloned input element in jQuery doesn’t work in IE6/7

【讨论】：

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

【解决方案2】：

var counter = 0;

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

【讨论】：

【解决方案3】：

您可能希望保留一个变量，告诉您到目前为止您做了多少克隆。

  var count = 0;

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

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

【讨论】：

你会希望你的 count 变量在每个函数中，这样每次找到 $articleForm 的子元素后它都会递增
@catfish 我认为您不希望表单上的每个项目都具有不同的 ID。每个 articleForm 都会有一个 id，它的所有子表单都会共享这个 id。所以articleForm2会有一个id为label2的标签，以此类推。

【解决方案4】：

假设您的页面中有一个区域将保存这些克隆的divs：

<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() 函数。

【讨论】：

【解决方案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);            
    });

【讨论】：