How to increase attributes using numbers using jquery?

Question

I have an HTML snippet, as shown below, I want to take a div as an “article form”, clone it and increase the numbers for the attributes for, id and 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>

I have the cloning part so far, but I need to take what I cloned by the intersection of elements inside, have an attribute for, id and name.

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

Let me add that part of the increment is not a problem. I plan to do the following. I am not sure what the best way to cross an attribute.

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

One more thing: the fact that it started at 0 is pointless, in some situations it can start at 5, and then the following next fields should be 6.

Answer 1

, . - ?

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

Answer 2

parseInt() . .

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

: attr jQuery IE6/7

Answer 3

var counter = 0;

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

Answer 4

, , div s:

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

, , , .

  var count = 0;

, , .

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

Answer 6

take a look at this link: jQuery clone duplicate IDs . Its a simple find and replace with id.

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