这个SSCCE说明了一切:
<!doctype html>
<html lang="en">
<head>
<title>Test</title>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$('#add').click(function() {
var ul = $('#ul');
var liclone = ul.find('li:last').clone(true);
var input = liclone.find('input');
input.attr('name', input.attr('name').replace(/(foo\[)(\d+)(\])/, function(f, p1, p2, p3) {
return p1 + (parseInt(p2) + 1) + p3;
}));
liclone.appendTo(ul);
$('#showsource').text(ul.html());
});
});
</script>
</head>
<body>
<ul id="ul">
<li><input type="text" name="foo[0]"></li>
</ul>
<button id="add">Add</button>
<pre id="showsource"></pre>
</body>
</html>
复制、粘贴并运行它，单击 Add按钮几次。每次点击时，您都应该看到 <ul> 的 HTML 代码显示在 <pre id="showsource">预期的代码大致应该是:
<li><input name="foo[0]" type="text"></li>
<li><input name="foo[1]" type="text"></li>
<li><input name="foo[2]" type="text"></li>
<li><input name="foo[3]" type="text"></li>
这在 FF、Chrome、Safari、Opera 和 IE8 中按预期工作。
但是，IE6/7 无法更改 name属性并生成如下:
<li><input name="foo[0]" type="text">
<li><input name="foo[0]" type="text">
<li><input name="foo[0]" type="text">
<li><input name="foo[0]" type="text"></li>
我googled查了一下，发现this very similar problem ，他修复了这个问题并发布了一个代码片段，它应该是什么样子。不幸的是，这正是我已经做过的，所以我怀疑他只在 IE8 中测试，而不是在 IE6/7 中测试。除了这个特定主题之外，谷歌没有透露太多信息。
有什么见解吗？或者我真的必须抓回document.createElement ？
注意:我知道我可以为每个输入元素使用相同的名称并将它们作为数组检索，但上面只是一个基本示例，实际上我确实需要更改 name 属性，因为它不仅包含索引，还包含其他信息，例如父级索引、排序等。它用于添加/重新排列/删除(子)菜单项。
编辑:这与this bug相关， jQuery(我正在使用 1.3.2)似乎不会以这种方式创建输入？以下内容确实有效:
$('#add').click(function() {
var ul = $('#ul');
var liclone = ul.find('li:last').clone(true);
var oldinput = liclone.find('input');
var name = oldinput.attr('name').replace(/(foo\[)(\d+)(\])/, function(f, p1, p2, p3) {
return p1 + (parseInt(p2) + 1) + p3;
});
var newinput = $('<input name="' + name + '">');
oldinput.replaceWith(newinput);
liclone.appendTo(ul);
$('#showsource').text(ul.html());
});
但我无法想象我是唯一一个在 jQuery 中遇到这个问题的人。即使是简单的$('<input>').attr('name', 'foo')在 IE6/7 中不起作用。难道 jQuery 作为一个跨浏览器库不应该在幕后解决这个特定的问题吗？
最佳答案
这是一个函数，可以在所有浏览器中设置元素的名称，甚至是 IE6 和 IE7。它改编自http://matts411.com/post/setting_the_name_attribute_in_ie_dom处的代码。 .
function setElementName(elems, name) {
if ($.browser.msie === true){
$(elems).each(function() {
this.mergeAttributes(document.createElement("<input name='" + name + "'/>"), false);
});
} else {
$(elems).attr('name', name);
}
}
我发现使用replaceElement和outerHTML在不同版本的IE上并不可靠。但是上面的 mergeAttributes 技巧非常有效!
关于jquery - 更改 jQuery 中克隆输入元素的名称 attr 在 IE6/7 中不起作用，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/2094618/