交换 jQuery 选择元素的属性答案

【问题标题】：Swapping attributes of jQuery Selection elements交换 jQuery 选择元素的属性
【发布时间】：2013-12-19 18:53:14
【问题描述】：

背景

我正在开发一个用 .NET 2.0 编写的 Web 应用程序，该应用程序在其页面上使用标准 WebControls。它最终会迁移到 4.x，但现在我需要调整它的一些移动行为 - 我的第一个要求是使用 HTML5 form input types 以便从自定义屏幕键盘格式中受益。

我选择的解决这个问题的方法是动态改变渲染元素的输入类型。我目前的限制是：

根据this post，由于Internet Explorer 的限制，jQuery 无法更改input 元素的type。
HtmlInputControl（当您将 runat='server' 添加到任何 HTML 元素时引用的类型）不支持 type 属性的新值。
如果我只是将具有所需新类型的 type 属性添加到标准 TextBox 控件中，它将渲染 type 属性两次。

所以我采用了 jQuery 方法。我的想法是用一个额外的标签 nexttype 实现一个有效的 TextBox 控件，如下所示：

<asp:TextBox ID="TextBox1" nexttype="phone" runat="server">

在运行时，它是这样渲染的：

<input name="TextBox1" type="text" id="TextBox1" nexttype="phone">

然后克隆渲染的元素，将它们的 type 属性替换为正确的 nexttype 对应物，如下所示：

<input name="TextBox1" type="phone" id="TextBox1">

我想我的 jQuery 代码应该是这样的：

$(':not([nexttype=""])').clone().attr('type', selectedelement.attr('nexttype')).insertAfter(selectedelement).prev().remove();

selectedelement，在这种情况下，只是一个占位符，我想这将是选择中的“当前选定”元素。

基本思路是：

选择一个元素
克隆它
更改克隆的 Type 属性
将克隆插入到文档中，紧跟在原始文档之后
删除原件

所以，是的，我很讨厌 jQuery。 =)

问题

当然，我的 jQuery one-liner 是非功能性的。我做错了什么？
有更好的方法吗？
是否已经有一些东西可以做到这一点，而我正在浪费时间重新发明轮子？

要求

我现在无法升级到 .NET 4.x；我仅限于 2.0。
我更喜欢不涉及添加外部程序集的解决方案。

【问题讨论】：

标签： jquery asp.net .net html .net-2.0

【解决方案1】：

找到了我认为有点笨拙的解决方案。基本上我遍历每个成员元素，操作克隆并删除原始元素：

<script>
    $(':not([nexttype=""])').each(
        function () {
            var _c = $(this).clone();
            _c.attr('type', $(this).attr('nexttype'));
            _c.removeAttr('nexttype');
            _c.insertAfter($(this)).prev().remove();
        });
</script>

仍然接受比这更优雅的解决方案。

【讨论】：