php - 在 Contact Form 7 生成的 html 中添加 html 元素

Question

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

联系表格 7 短标签:

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

CF7 生成的 HTML:

<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 等跨度，因此它看起来像这样:

CF7 生成的 HTML:

<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()插入<i></i>之前span .

$(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>