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

Change DOM position of dynamically created labels

本文关键字：标签 位置 DOM 创建 动态      更新时间：2023-09-26

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

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

我需要为每个输入添加类，这很容易。我还需要将每个标签放在相应的输入之后。举例来说，我可以用这个代码针对每个标签。

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

通过这种方式，我可以针对每五个标签，但我找不到移动每个标签的方法，就在相应的输入字段之后。

您可以使用.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);
});

您必须找到以下input同级：

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