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

我有一个HTML片段如下，我想借此“文章形式” DIV，克隆它，并增加号码的属性为，ID和名。如何使用jquery使用数字来增加属性？

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

来源

2010-02-08 Jason Christa

你混合变量名吗？$ varName是PHP，你在javascript上使用它。 – jpabluz 2010-02-08 15:40:30

在变量名称开头使用'$'是有效的Javascript，并且是表示变量是jQuery对象的一种非常好的方式。 – nickf 2010-02-08 15:42:54

@jpabluz - 不，用这种方法命名JavaScript变量是可以接受的。此外，它的优点在于将$添加到存储jQuery对象的任何变量的前面。 – 2010-02-08 15:43:27

这是我到目前为止所提出的解决方案。任何看起来可怕的错误？

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

来源

2010-02-08 17:13:25

你可能想保持这个变量告诉你迄今为止创建了多少个克隆。

var count = 0;

然后每次你做一个克隆你增加计数。

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

来源

2010-02-08 15:41:56

你会希望你的计数变量在每个函数内部，这样它就会在每次找到孩子的时候递增$ articleForm – Catfish 2010-02-08 15:44:25

@catfish我不认为你希望表单上的每个itemn都有不同的id。每篇articleForm都会有一个id，它的所有孩子都会分享这个id。所以articleForm2将会有一个label2的标签，依此类推。 – 2010-02-08 15:48:02

var counter = 0; 

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

来源

2010-02-08 15:42:53 Catfish

你可以抓住一个小的正则表达式和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

来源

2010-02-08 15:48:17 BalusC

哇，这是一些警告，但在这种情况下，我可以确保只使用FF，Chrome和Safari。 – 2010-02-08 16:13:43

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

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

来源

2010-02-08 15:48:42

这看起来像是在正确的轨道上，但我希望有更多的一般用途。我知道格式是form-number-name，属性为id，名称。我只想增加数字部分，并使用表单，增加的数字和名称部分将属性名称拼凑在一起。 – 2010-02-08 16:12:22

假设你有你的页面的区域，将持有这些克隆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()功能。

来源

2010-02-08 15:50:59

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

回答

相关问题