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

【问题标题】：Add label field after input radio button through jquery通过jquery输入单选按钮后添加标签字段
【发布时间】：2015-04-27 16:41:16
【问题描述】：

我的 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>

如您所见，此输出不包含输入后文本的代码“标签”。我试过用代码

$('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);
}
}
}); 
});

【问题讨论】：

您能否提供一个您尝试使用 jQuery 创建的 HTML 结构的示例？
是的，你想要的输出是什么？
你为什么要做这个客户端？这感觉（尽管我可能错了）就像一个问题，在生成<form> 时可以更好地在服务器端解决。顺便说一句，“this [code] doesn't work”到底是什么意思？它以什么方式“不起作用”？

标签： jquery radio-button label

【解决方案1】：

这是一种使用 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

【讨论】：

你拯救了我的一天

【解决方案2】：

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

["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>

【讨论】：