在 Contact Form 7 生成的 html 中添加一个 html 元素

Question

我们正在使用 Contact Form 7 插件，并希望在 Contact Form 7 生成的 html 代码中引入一个附加元素（斜体 (i)）。

联系表格 7 短标签：

[checkbox* areas_checkbox id:ftype_box class:checkbox use_label_element "Option1" "Option2" "Option3"]

HTML由CF7生成：

<span class="wpcf7-list-item first">
    <label>
    <input type="checkbox" name="areas_checkbox[]" value="Xero">
    <span class="wpcf7-list-item-label">Option1</span>
</label>
</span>
...

出于样式原因，为什么需要在选项之前添加元素斜体 (i) - 选项 1、选项 2 等跨度，因此它看起来像这样：

HTML由CF7生成：

<span class="wpcf7-list-item first">
<label><input type="checkbox" name="areas_checkbox[]" value="Xero">
<i></i>
<span class="wpcf7-list-item-label">Option1</span>
</label>
</span>
...

这可以通过 jquery 或通过 CF7 短代码 (php) 实现吗？

Answer 1

您可以使用before()在span之前插入<i></i>。

$(document).ready(function(){
  //$( "i" ).insertBefore( $( ".wpcf7-list-item-label" ) );
  $('.wpcf7-list-item-label').before('<i></i>');
})

i{border:1px solid red; display:inline-block; height:10px; width:10px}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<span class="wpcf7-list-item first">
    <label>
    <input type="checkbox" name="areas_checkbox[]" value="Xero">
    <span class="wpcf7-list-item-label">Option1</span>
</label>
</span>

在 Contact Form 7 生成的 html 中添加一个 html 元素

Add an html element inside the html generated by Contact Form 7

html

php

wordpress

jquery

contact-form-7