通过 jquery 在输入单选按钮后添加标签字段

Question

我的 CMS 生成下一个代码：

<table class="variations" cellspacing="0">
    <tbody>
        <tr>
            <td class="label">
                <label for="pa_period">period</label>
            </td>
            <td class="value">
                <fieldset> 
                    <strong>Choose An Option...</strong><br />
                    <input type="radio" value="today" id="pa_period" name="attribute_pa_period">today<br />
                    <input type="radio" value="tomorrow" id="pa_period" name="attribute_pa_period">tomorrow<br />
                </fieldset>
            </td>
        </tr>
        <tr>
            <td class="label">
                <label for="pa_version">version</label>
            </td>
            <td class="value">
                <fieldset> 
                    <strong>Choose An Option...</strong><br />
                    <input type="radio" value="inoffice" id="pa_version" name="attribute_pa_version">in office<br />
                    <input type="radio" value="bymail" id="pa_version" name="attribute_pa_version">by mail<br />
                </fieldset>
            </td>
        </tr>
    </tbody>
</table>

如您所见，此输出不包含输入后文本的代码 'label'。我试过使用代码

$('fieldset strong').remove();
$('fieldset br').remove();
$('label').remove();
var text = $.trim($('fieldset').text());
var te = text.split("\n");
$('fieldset :radio, fieldset :checkbox').each(function (i) {
    $(this).after('<label for="' + this.id + '">' + te[i] + '</label>');
});
var child = $('fieldset').children('input,label');
$('fieldset').html(child);

但是这条鳕鱼不起作用（我是jquery的新手）

已编辑...感谢@charlietfl。我的 Woocommerce 单选按钮插件结果代码 ( https://wordpress.org/plugins/woocommerce-radio-buttons/ )

$(document).ready(function() {  
$('fieldset strong').remove();
$('fieldset br').remove();
var $nodes = $('fieldset').contents();
$nodes.each(function (i) {
if ($(this).is('input')) {
this.id = this.id+i;              
var nextNode = $nodes[i + 1];
if (nextNode && nextNode.nodeType == 3) {
var label = '<label for="' + this.id + '">' + nextNode.textContent + '</label>';
$(nextNode).replaceWith(label);
}
}
}); 
});

Answer 1

您的文本数组不是您所期望的

["today", "                    ", 
 "                    tomorrow", 
 "                    ", 
 "                 ", 
 "", "                    ", 
 "                    in office", 
 "                    ", 
 "                    by mail"]

您可以使用

te=te.filter(function(str){
  return $.trim(str)!="";
});

$('fieldset strong').remove();
$('fieldset br').remove();
$('label').remove();
var text = $.trim($('fieldset').text());
var te = text.split("\n");
te=te.filter(function(str){
    return $.trim(str)!="";
});
$('fieldset :radio, fieldset :checkbox').each(function (i) {
    $(this).after('<label for="' + this.id + '">' + te[i] + '</label>');
});
var child = $('fieldset').children('input,label');
$('fieldset').html(child);

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<table class="variations" cellspacing="0">
    <tbody>
        <tr>
            <td class="label">
                <label for="pa_period">period</label>
            </td>
            <td class="value">
                <fieldset> <strong>Choose An Option...</strong>

                    <br />
                    <input type="radio" value="today" id="pa_period" name="attribute_pa_period" />today
                    <br />
                    <input type="radio" value="tomorrow" id="pa_period" name="attribute_pa_period" />tomorrow
                    <br />
                </fieldset>
            </td>
        </tr>
        <tr>
            <td class="label">
                <label for="pa_version">version</label>
            </td>
            <td class="value">
                <fieldset> <strong>Choose An Option...</strong>

                    <br />
                    <input type="radio" value="inoffice" id="pa_version" name="attribute_pa_version">in office
                    <br />
                    <input type="radio" value="bymail" id="pa_version" name="attribute_pa_version">by mail
                    <br />
                </fieldset>
            </td>
        </tr>
    </tbody>
</table>

Answer 2

这是一种使用 contents() 的方法，因此您可以检查输入后的文本节点并仅替换那些文本节点

var $nodes = $('fieldset').contents();

$nodes.each(function (i) {
    if ($(this).is('input')) {
        var nextNode = $nodes[i + 1];
        if (nextNode && nextNode.nodeType == 3) {
            var label = '<label for="' + this.id + '">' + nextNode.textContent + '</label>';
            $(nextNode).replaceWith(label);
        }
    }
});

您还可以使用 :input

修改 input 选择器以包含 textarea 和 select

DEMO

通过 jquery 在输入单选按钮后添加标签字段

Add label field after input radio button through jquery

jquery

label

radio-button