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>

正如您所看到的，此输出不包含代码＆＃39;标签＆＃39;输入后的文字。我尝试过使用代码

$('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 Radio Buttons Plugin（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)!="";
});

＆＃13;

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

＆＃13;

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

＆＃13;

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修改textarea选择器以包含select和:input

的 DEMO

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

2 个答案: