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.
Share Improve this question edited Feb 8, 2010 at 15:55 Jason Christa asked Feb 8, 2010 at 15:36 Jason ChristaJason Christa 12.5k15 gold badges61 silver badges86 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
5 Answers
Reset to default 2You 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 div
s:
<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
版权声明:本文标题:javascript - How do I increment attributes with numbers using jquery? - Stack Overflow 内容由网友自发贡献,该文观点仅代表作者本人, 转载请联系作者并注明出处:http://www.betaflare.com/web/1742007247a2412206.html, 本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容,一经查实,本站将立刻删除。
发表评论