更改动态创建的标签的 DOM 位置答案

【问题标题】：Change DOM position of dynamically created labels更改动态创建的标签的 DOM 位置
【发布时间】：2014-05-24 20:03:32
【问题描述】：

我需要设置一些 CMS 生成的标签和输入字段的样式。这是每个元素的标记（总共有五个）。

<br>
<label>City of birth:</label>
<br>
<input type="text" maxlength="200" name="os5">

我需要为每个输入添加类，这很容易。我还需要将每个标签放在相应的输入之后。例如，我可以使用此代码定位每个标签。

$('label:nth-of-type(2)').css('color','blue');

这样我可以定位每五个标签，但我找不到移动每个标签的方法，就在相应的输入字段之后。

【问题讨论】：

label 元素如何“对应”input 元素？在label 中应该有一个for 属性，在input 上应该有一个id 以便关联它们。
它们不是实际的表单元素，它们用于自定义文本消息，用于购物车中的产品。

标签： javascript jquery dom dom-manipulation

【解决方案1】：

您可以使用.each 遍历集合以单独获取每个集合，此时.nextAll 将让您找到适当的关注<input> 和.after 可用于移动其标签。

$('label:nth-of-type(2)')
    .css('color', 'blue')
    .each(function () {
        var $label = $(this);
        var $input = $label.nextAll('input').eq(0);

        $input.after($label);
    });

请记住，适当的做法可能是更好地识别您的标签，并使用<label> 的for 属性确保它们与表单字段相关联（但选择更好的类名）：

<label class="move-label" for="city-of-birth">City of birth:</label>
⋮
<input type="text" name="os5" id="city-of-birth" maxlength="200" />

然后你可以这样做，我认为这更好 =)

var labels = Array.prototype.slice.call(
        document.getElementsByClassName('move-label')
    );

labels.forEach(function (label) {
    var associatedElement = document.getElementById(label.htmlFor);

    label.parentNode.insertBefore(associatedElement, label.nextSibling);
});

…虽然 jQuery 也可以：

$('.move-label').each(function () {
    var $input = $(document.getElementById(this.htmlFor));

    $input.after(this);
});

……如果你在打高尔夫球：

$('.move-label').each(function () {
    $('#' + this.htmlFor).after(this);
});

【讨论】：

【解决方案2】：

你必须找到以下input兄弟：

$('label:nth-of-type(2)').each(function() {
   $(this).insertAfter($(this).nextAll('input:first'));
});

【讨论】：