Question

我有一个HTML代码段，如下所示，我想采用'article-form'div，克隆它，并为的属性增加数字，和名称。

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

到目前为止，我有克隆部分，但是我需要克隆一个遍历的内部元素， id 和名称

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

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

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

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

Answer 1

你可以为此获取一点正则表达式和parseInt()。 E.g。

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

Answer 2

var counter = 0;

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

Answer 3

假设您的网页区域中包含这些克隆的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()函数。

Answer 4

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

  var count = 0;

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

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

Answer 5

看一下这个链接：jQuery clone duplicate IDs。它是一个简单的查找和替换id的。

var $articleForm = $(".article-form").clone(false);
$articleForm.find("#id_form-0-section").attr("id", "id_form-" + counter + "-section");
... etc ...

Answer 6

这是我到目前为止提出的解决方案。看起来有什么不对劲吗？

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

如何使用jquery使用数字增加属性？

6 个答案: