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

我想将元素中的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>

你好

这应该可以做到：

$('.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);
    }
});

看

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

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

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

这应该可以做到：

$('.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);
    }
});

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

看

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

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

---

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

根据您的要求，要对类为

moveID

的所有项自动执行此操作，您可以使用以下方法：

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

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

---

根据您的要求，要对类为

moveID

的所有项目自动执行此操作，您可以使用：

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

---

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

---

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

当然，这会将相同的ID添加到尽可能多的select中，这是不好的。因此，您可能希望改用类：

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

（更新）

当然，这会将相同的ID添加到尽可能多的select中，这是不好的。因此，您可能希望改用类：

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

---

---

（更新）

您描述的不是“next”元素（表示下一个兄弟），而是直接子元素。你可能是指同一级别的直系子女或下一个兄弟姐妹。我说的对吗？您描述的不是“next”元素（表示下一个兄弟），而是直接子元素。你可能是指同一级别的直系子女或下一个兄弟姐妹。我说得对吗？这不符合“我还希望它能够自动化，这样，如果我有20个选择框，我就不会有20行单独的jQuery。”@KyleMacey oops，错过了这一点。。。现在修复了非jQuery版本必须非常小心

firstChild

实际上是所需的元素。HTML中的一些空格可能导致firstChild成为文本节点。这是使用jQuery的优点之一，因为它跳过文本节点，只找到实际的元素。它不起作用，因为没有名为

removeAttr

的方法。而且，当你修复它时，它不起作用，因为它选择了一个文本节点，而不是选择节点。@jfriend00你看到的是一个旧版本。这不符合“我也希望它是自动化的，这样如果我有20个选择框，我就没有20行单独的jQuery。”@KyleMacey oops，错过了这一点。。。现在修复了非jQuery版本必须非常小心

firstChild

实际上是所需的元素。HTML中的一些空格可能导致firstChild成为文本节点。这是使用jQuery的优点之一，因为它跳过文本节点，只找到实际的元素。它不起作用，因为没有名为

removeAttr

的方法。而且，当您修复该问题时，它不起作用，因为它选择的是文本节点，而不是选择节点。@jfriend00您正在查看的是旧版本。这假设所有输入元素上次编辑时都有“溢出”的名称，那么我就退出了。这太泛滥了。每个人都争先恐后地想得到答案。包括我自己这假设所有输入元素在最后一次编辑时都有“溢出”的名称，那么我就退出了。这太泛滥了。每个人都争先恐后地想得到答案。我自己使用

removeAttr

包含+1，并且继续链接是最优雅的方式。@AtesGoral但没有使用DOM方法那么有效-有时jQuery会让人们忘记这是多么容易…我们需要一个innerHTML+RegExp解决方案来演示远端。完美答案。这就解决了问题。非常感谢您的时间。+1使用

removeAttr

并继续链接是最优雅的方式。@AtesGoral但没有使用DOM方法那么有效-有时jQuery会让人们忘记这有多容易…我们需要一个innerHTML+RegExp解决方案来演示远端。完美答案。这就解决了问题。非常感谢您抽出时间。