javascript - How do I increment attributes with numbers using jquery? - Stack Overflow

admin管理员组

文章数量:1316664

I have a HTML snippet as follows, I want to take the 'article-form' div, clone it, and increment 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 have cloned an traverse the elements inside have the attribute for, id, and name.

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

Let me add, the increment part isn't the problem. I plan on doing the following. I am not sure what is the best way to traverse by attribute.

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

One more thing, the fact that this started at 0 is meaningless, in some situations it could start with 5 and then the next fields that follow should be 6.

I have a HTML snippet as follows, I want to take the 'article-form' div, clone it, and increment 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 have cloned an traverse the elements inside have the attribute for, id, and name.

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

Let me add, the increment part isn't the problem. I plan on doing the following. I am not sure what is the best way to traverse by attribute.

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

One more thing, the fact that this started at 0 is meaningless, in some situations it could start with 5 and then the next fields that follow should be 6.

• javascript
• jquery

Share Improve this question Follow edited Feb 8, 2010 at 15:55 Jason Christa asked Feb 8, 2010 at 15:36 Jason ChristaJason Christa 12.5k1515 gold badges6161 silver badges8686 bronze badges 3

• Are you mixing the variable names? $varName is PHP and you are using it on javascript. – jpabluz Commented Feb 8, 2010 at 15:40
• 2 using $ at the start of variable names is valid Javascript and a very good way to denote that the variable is a jQuery object. – nickf Commented Feb 8, 2010 at 15:42
• 2 @jpabluz - No, it is acceptable to name the JavaScript variable this way. Moreover, its good practice to affix the $ to the front of any variable that stores a jQuery obejct. – Mutation Person Commented Feb 8, 2010 at 15:43

Add a ment  | 

5 Answers 5

Sorted by: Reset to default 2

You could grab a little regex and parseInt() for this. E.g.

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

There's however only one huge caveat: Changing name attr of cloned input element in jQuery doesn’t work in IE6/7

var counter = 0;

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

You may want to keep a variable that tells you how many clones you made so far.

  var count = 0;

Then every time you make a clone you increment the count.

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

Assuming you have an area of your page that will hold these cloned divs:

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

Start with a page-wide counter variable:

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

Create a function that builds the HTML for you:

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

Call the function on page load:

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

Then, whatever mechanism you use to add the new div (say, a hyperlink click event), call the buildArticleFormDiv() function.

Here is the solution I have e up with so far. Anything look horribly wrong with it?

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

本文标签： javascriptHow do I increment attributes with numbers using jqueryStack Overflow