Jquery 将 data-rel 属性添加到所有输入字段并删除 name 属性答案

【问题标题】：Jquery add data-rel attribute to all input fields and remove name attributeJquery 将 data-rel 属性添加到所有输入字段并删除 name 属性
【发布时间】：2013-12-12 15:25:12
【问题描述】：

我需要以某种方式为输入字段设置 data-rel 值，并从特定类的同一输入字段中删除名称。

到目前为止，我所做的代码正在努力从该特定字段中删除名称。但我无法将 data-rel 添加到同一个字段。

这里是代码。

$('.vf-sortable-holder').each(function() {
    var empty_sortable = $(this).closest('.option').find('.empty-sortable').find('input');
    var sortable_name = empty_sortable.attr('name');

    input.attr('data-rel', sortable_name);

    empty_sortable.removeAttr('name');

});

所以html看起来像这样

<div class="option">
    <div class="vf-sortable-holder">
        <div class="empty-sortable hidden">
        <input type="text" name="example">
        </div>
    </div>
</div>

<div class="option">
    <div class="vf-sortable-holder">
        <div class="empty-sortable hidden">
        <input type="text" name="example">
        </div>
    </div>
</div>

所以我的 js 代码可以删除 name 属性，但我实际上需要使用 data-rel 更改名称，或者使用 js 代码从 html 中删除名称并添加 data-rel，或者最后以某种方式将名称重命名为 data-rel需要它看起来像这样：

<div class="option">
    <div class="vf-sortable-holder">
        <div class="empty-sortable hidden">
        <input type="text" data-rel="example">
        </div>
    </div>
</div>

<div class="option">
    <div class="vf-sortable-holder">
        <div class="empty-sortable hidden">
        <input type="text" data-rel="example">
        </div>
    </div>
</div>

【问题讨论】：

没有empty-sortable元素
是的，感谢您的注意，代码中有空可排序，我只是忘记在示例中写在这里，我编辑了页面以添加空可排序元素。
什么是“输入”？该变量未在任何地方定义

标签： javascript jquery html

【解决方案1】：

这是你要找的吗？

$('.vf-sortable-holder').each(function() {
    var empty_sortable = $(this).find('input');
    var sortable_name = empty_sortable.attr('name');

    empty_sortable.attr('data-rel', sortable_name).removeAttr('name');;
});

同时删除 '.'来自 HTML 中的 vf-sortable 类名。

【讨论】：

会给出相同的答案，当你有 $(this) 时，不需要先上再下
是的，这成功了，我只需要像您在示例中发布的那样更改 empty_sortable 并且它有效，尽管我不明白这与我的代码中的内容有何不同，但是这个有效，非常感谢。

【解决方案2】：

选择.vf-sortable-holder，然后是父.option，然后是.empty-sortable，最后是input，都在内部循环中，似乎跳过了很多圈？

$('.option .vf-sortable-holder .empty-sortable input').attr('data-rel', function() {
    return this.name;
}).prop('name','');

【讨论】：

【解决方案3】：

去掉类名中的.(.vf-sortable-holder)

<div class="option">
    <div class="vf-sortable-holder">
        <input type="text" name="example" />
    </div>
</div>
<div class="option">
    <div class="vf-sortable-holder">
        <input type="text" name="example2" />
    </div>
</div>

然后

jQuery(function () {
    $('.vf-sortable-holder input').attr('data-rel', function () {
        var name = this.name;
        $(this).removeAttr('name');
        return name;
    })
})

演示：Fiddle

【讨论】：