Jquery将data-rel属性添加到所有输入字段，并移除name属性

Jquery add data-rel attribute to all input fields and remove name attribute

本文关键字：属性 字段 输入 name data-rel 添加 Jquery      更新时间：2023-09-26

我需要以某种方式将数据rel值添加到输入字段，并从特定类的同一输入字段中删除名称。

到目前为止，我所做的代码正在从特定字段中删除name。但我不能将数据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>

这就是您想要的吗？

$('.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可排序类名。

选择.vf-sortable-holder，然后选择父.option，然后选择.empty-sortable，最后选择input，所有这些都是内部循环，看起来像是跳过了很多圈？

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

删除类名（.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

相关文章：