javascript - 更改动态创建的标签的 DOM 位置

Question

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

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

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

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

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

Answer 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);
});