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

您必须找到以下input兄弟：

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

Answer 2

您可以使用.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>的{{1}}属性与表单字段相关联（但选择更好班级名称）：

for

然后你可以做到这一点，我认为这更好=）

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

...虽然jQuery也有效：

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

......如果你打高尔夫球：

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

    $input.after(this);
});

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

2 个答案: