Jquery 如何在span元素wpcf7表单控件包装中放置标签

我想把输入元素的标签放在由cf7短代码生成的span元素中——这可能吗

我想这样做的原因是，我试图使标签仅在输入字段具有：焦点时显示

为了做到这一点，标签和输入需要在同一个元素中，以便我可以使用以下css选择器作为目标：

输入ID:focus+.label类 我已经尝试将生成的HTML标记粘贴到CF7中，并将标签移到里面（而不是使用快捷码），这实现了我想要的，但是它会导致一个奇怪的问题，即“required”属性不再起作用-所有字段都是必需的，但表单现在可以空提交

这是CF7产生的结果：

名称

这就是我想要的：

名称

---

我尝试过实现上面的HTML，而不是使用CF7短代码，但“必需”不再有效

请检查它是否有帮助。我认为您在每个函数或循环中都使用了

var getLabel=$（“.wpcf7表单控件包装”）.next（“label”）.detach（）；
$（“.wpcf7表单控件包装”）.append（getLabel）
.wpcf7表单控件：焦点+.label助手{color:red；}

名称
这对我很有用

    var spans = document.getElementsByClassName("wpcf7-form-control-wrap");
    for(var i=0;i<spans.length;i++)
    {
        var input = spans[i].nextSibling;
        if(input != null)
        {
            if(input.tagName == "LABEL")
            {
                spans[i].appendChild(input);
            }   
        }   
    }

var span=document.getElementsByClassName（“wpcf7表单控件包装”）；
对于（var i=0；i谢谢你-如果我手动输入HTML（而不是使用CF7短代码），我可以看到这是可行的…但是出于某种原因，如果我使用短代码生成表单字段-那么这个jquery不起作用（我添加到了页面的头部）-知道为什么会这样吗？