WordPress Gravity Form中为ul下li元素添加类并包裹div的需求

嘿，我懂你折腾了好几个小时的痛点——Gravity Forms把所有输入框都塞进一个ul里，要给除最后一个li之外的所有项套上带left类的div，最后一个单独加right类对吧？这事儿用jQuery或者原生JS都能轻松搞定，我给你捋捋具体实现：

方案一：用jQuery实现（适合熟悉jQuery的场景） #

WordPress默认自带jQuery，而且Gravity Forms本身也依赖它，所以这个方案最省心：

jQuery(document).ready(function($) {
  // 选中Gravity Forms的字段列表ul，默认类是gform_fields，可根据实际调整
  const $formFields = $('.gform_fields');
  
  // 给除最后一个之外的所有li包裹带left类的div
  $formFields.find('li:not(:last-child)').each(function() {
    $(this).wrap('<div class="left"></div>');
  });
  
  // 给最后一个li添加right类
  $formFields.find('li:last-child').addClass('right');
});

关键说明： #

• 用wrap()方法直接把每个符合条件的li包裹进目标div，比手动创建div再移动元素简洁太多
• 因为WordPress里jQuery是兼容模式运行的，所以用jQuery(document).ready(function($) {...})可以让你在回调里用$代替jQuery，写起来更顺手
• 如果是特定表单，建议给选择器加上表单ID，比如#gform_1 .gform_fields，避免影响其他表单

方案二：原生JS实现（无jQuery依赖） #

如果不想依赖jQuery，原生JS也能实现同样的效果：

document.addEventListener('DOMContentLoaded', function() {
  // 找到目标ul，没有的话直接退出避免报错
  const formFields = document.querySelector('.gform_fields');
  if (!formFields) return;
  
  const listItems = formFields.querySelectorAll('li');
  const totalItems = listItems.length;
  
  for (let i = 0; i < totalItems; i++) {
    const li = listItems[i];
    if (i !== totalItems - 1) {
      // 不是最后一个li，创建div并包裹
      const wrapperDiv = document.createElement('div');
      wrapperDiv.classList.add('left');
      // 先把div插到li前面，再把li移进div
      li.parentNode.insertBefore(wrapperDiv, li);
      wrapperDiv.appendChild(li);
    } else {
      // 最后一个li，直接添加right类
      li.classList.add('right');
    }
  }
});

额外注意：AJAX加载的表单 #

如果你的表单是AJAX动态加载的（比如切换分页或者AJAX提交后重新渲染），上面的代码可能不会生效，这时候要监听Gravity Forms的gform_post_render事件：

jQuery(document).on('gform_post_render', function(event, formId) {
  // 针对当前渲染的表单处理
  const $formFields = $('#gform_' + formId + ' .gform_fields');
  
  $formFields.find('li:not(:last-child)').wrap('<div class="left"></div>');
  $formFields.find('li:last-child').addClass('right');
});

这样每次表单渲染完成后都会自动执行处理逻辑，完美适配AJAX场景。

内容的提问来源于stack exchange，提问作者Keviin Cosmos