表单 ID 中带有 jQ​​uery 的通配符数字

Posted 2023-05-08

【中文标题】表单 ID 中带有 jQ​​uery 的通配符数字

【英文标题】：Wildcard digit with jQuery in form ID

【发布时间】：2022-01-20 17:04:12

【问题描述】：

我有这段代码（缩写），它从 Gravity Forms WordPress 插件呈现，没有钩子或其他改变其输出的方法（除了分叉插件）：

<div class="gform_heading">...</div>
<form id="gform_8" action="/volunteer/">
    <div class="gform_body gform-body">...</div>
    <div class="gform_footer top_label">...</div>
</form

我需要 div class="gform_heading">...</div> 是 <form> 元素的子元素：

<form id="gform_8" action="/volunteer/">
    <div class="gform_heading">...</div>
    <div class="gform_body gform-body">...</div>
    <div class="gform_footer top_label">...</div>
</form

我打算用这个 jQuery 来改变 DOM。

$(".gform_heading").prependTo("[id^=gform_]");

但是，该站点有多个表单，gform_... id 的下划线后面有一个数字，该数字根据呈现给页面的表单而变化。我需要对 jQuery 中的数字进行通配符，以便它可以适用于网站可能嵌入页面的任何形式，无论是现在还是未来。

我在 Inspector 控制台中尝试了Use wildcard ID with jQuery and get wildcard ID 的解决方案（替换了我的表单 ID 和类名），但没有成功。

最正确的方法是什么？

【问题讨论】：

“没用”是什么意思？它没有正确选择元素，还是没有正确添加？

你试过$(".gform_heading").prependTo('form')吗？

@skara9 意思是，它根本没有做任何事情。不知道为什么。我不精通jQuery。

@justinas 好点。我的问题是，如果页面上有多个表单怎么办？它不会添加到所有表单中吗？

【参考方案1】：

您可以只循环浏览页面上的表单，检查 id 和前面元素上的类是否匹配，然后再添加...

$('form').each(function(i, o) 
  let before = $(o).prev();
  if (o.id.includes('gform_') && before.hasClass('gform_heading')) 
    before.prependTo($(o)).append(` - and my id if you need it is $o.id.split('gform_')[1]`) 
  
)

form 
  border: 1px solid #333;

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="gform_heading">gform_heading</div>
<form id="gform_8" action="/volunteer/">
  <div class="gform_body gform-body">...</div>
  <div class="gform_footer top_label">...</div>
</form>


<div class="gform_heading">gform_heading</div>
<form id="other_8" action="/volunteer/">
  <div class="gform_body gform-body">...</div>
  <div class="gform_footer top_label">...</div>
</form>