使用jQuery调整表单div结构：将label移入field并处理脚本干扰

当然可以用jQuery搞定这个需求！我分两种场景给你拆解方案，先解决最初的简单结构，再处理插入了内联脚本的复杂情况。

1. 基础场景（无内联脚本） #

如果你的表单结构是严格的.cf-label紧跟.cf-field，直接用这段代码就能实现需求：

$(document).ready(function() {
  // 遍历每一个.cf-label元素
  $('.cf-label').each(function() {
    const $currentLabel = $(this);
    // 找到当前label后面紧邻的.cf-field
    const $targetField = $currentLabel.next('.cf-field');
    
    // 确认找到对应field后，把label移到field内部最前面
    if ($targetField.length) {
      $targetField.prepend($currentLabel);
    }
  });
});

执行后，原本的label → field结构会变成field（内部包含label+原field内容）的重复模式，完全符合你的要求。

2. 进阶场景（Caldera Forms插入内联脚本） #

遇到Caldera Forms自动插入内联脚本的情况，结构变成label → script → field，我们需要先把这些干扰的脚本移到容器底部，再处理label和field的关系：

$(document).ready(function() {
  $('.cf-label').each(function() {
    const $currentLabel = $(this);
    // 筛选出label和对应field之间的所有script元素
    const $interveningScripts = $currentLabel.nextUntil('.cf-field', 'script');
    
    // 把这些脚本移到表单容器的底部（这里假设容器是<form>，可根据实际替换成你的容器选择器）
    if ($interveningScripts.length) {
      $('form').append($interveningScripts);
    }
    
    // 现在label后面就是对应的field了，执行移入操作
    const $targetField = $currentLabel.next('.cf-field');
    if ($targetField.length) {
      $targetField.prepend($currentLabel);
    }
  });
});

关键细节说明： #

• nextUntil('.cf-field', 'script')：精准选中当前label之后、第一个.cf-field之前的所有script，不会误操作其他位置的脚本。
• 把脚本移到表单底部：既不会破坏label和field的对应关系，也能保证脚本的正常执行顺序。
• 若你的表单容器不是<form>，比如是.caldera-forms-container，直接替换$('form')为对应的选择器即可。

额外提醒： #

• 一定要确保代码在DOM完全加载后执行，包裹在$(document).ready()里是最稳妥的方式；如果表单是AJAX动态加载的，要在表单加载完成后再调用这段代码。

内容的提问来源于stack exchange，提问作者Briany Hearne