如何使用jquery使用數字來增加屬性？

Question

我有一個HTML片段如下，我想借此「文章形式」 DIV，克隆它，並增加號碼的屬性爲，ID和名。

<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

這是我到目前爲止所提出的解決方案。任何看起來可怕的錯誤？

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

你可能想保持這個變量告訴你迄今爲止創建了多少個克隆。

var count = 0; 

然後每次你做一個克隆你增加計數。

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

Answer 3

var counter = 0; 

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

Answer 4

你可以抓住一個小的正則表達式和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

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

假設你有你的頁面的區域，將持有這些克隆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()功能。