Question

我想将元素中的ID移动到页面上的下一个select元素。我必须这样做是因为用于编写选择框的软件不允许将类或id直接应用于选择元素。我也希望它是自动化的，这样如果我有20个选择框，我没有20个单独的jQuery行。

以下是当前代码：

<div id="stack" class="moveID">
    <select name="overflow">
        <option value="hi">Hi</option>
    </select>
</div>

这就是我想要发生的事情。

<div class="moveID">
    <select name="overflow" id="stack">
        <option value="hi">Hi</option>
    </select>
</div>

Answer 1

根据您的要求，要为课程moveID的所有项目自动执行此操作，您可以使用此功能：

$('.moveID').each(function() {
    var id = this.id;
    $(this).removeAttr('id').children().first().attr('id', id);
});

Answer 2

$.each($('.moveID'), function(){
  var moveTo = $(this + ':first-child');
  $(moveTo).attr('id', $(this).attr('id'));
  $(this).removeAttr('id');
})

Answer 3

假设每个select元素都有.moveID（直接）换行：

$("select").each(function () {

    // or this.id = $(this).closest(".moveID")[0].id;
    this.id = $(this).parent()[0].id;
    $(this).parent().removeAttr("id");
});

Answer 4

var id= $(".moveID").attr("id");
$(".moveID").removeAttr("id").find("select").attr("id",id);

当然，这会为尽可能多的选择添加相同的ID，这很糟糕。所以你可能想要改用类：

var id= $(".moveID").attr("id");
$(".moveID").removeAttr("id").find("select").addClass(id);

（更新）

Answer 5

这应该这样做：

$('.moveID').each(function() {
    // record current ID
    var id = this.id;

    // find the first HTMLElement inside
    var child = this.firstChild;
    while (child && child.nodeType != 1) {
        child = child.nextSibling;
    }

    // if found, swap the IDs
    if (child) {
        this.removeAttribute('id');
        child.setAttribute('id', id);
    }
});

请参阅http://jsfiddle.net/dqN8n/3/

这使用jQuery来查找要移动的元素，但随后使用本机DOM方法来实际进行更改。这将替代方案更有效：

$('.moveID').each(function() {
    var id = this.id;
    $(this).removeAttr('id').children().first().attr('id', id);
}

因为没有很多中间jQuery对象的创建，并且（最多）有两个函数调用而不是五个。

使用jQuery将ID移动到下一个元素

5 个答案: