jQuery get & replace html in radio input 以添加标签标签

Question

我正在使用内容管理系统，因此我没有直接的HTML访问（如果我这样做会容易得多！）

通过jQuery，我需要根据广播按钮的值＆amp;添加课程＆amp;标签标签。这是HTML：

<span class="product_code">TESTPRODUCT</span> 
<br /> 
<table> 
  <td valign="top"></td>
  <td> 
    <input name="SELECT___TESTPRODUCT___13" value="5" type="radio" > Size 5<br />
    <input name="SELECT___TESTPRODUCT___13" value="6" type="radio"> Size 6<br />
    <input name="SELECT___TESTPRODUCT___13" value="7" type="radio"> Size 7<br />
  </td> 
</table>

这是我的jQuery尝试：

var productCode = $(".product_code").text();
var WidthRadioValue = $('input[name="SELECT___' + productCode + '___13"]').val();
var $nodes = $('input[name="SELECT___' + productCode + '___13"]').contents();
var label = '<label for="' + this.id + '">' + nextNode.textContent + '</label>';
var nextNode = $nodes[i + 1];
$(document).ready(function() {
  $('input:radio[name="SELECT___' + productCode + '___13"]').each(function() {
    $(this).addClass('WidthRadioClass');
    $('input[name="SELECT___' + productCode + '___13"]').attr("id", WidthRadioValue + "mm");
  });
  $nodes.each(function(i) {
    if ($(this).is('input')) {
      if (nextNode && nextNode.nodeType == 3) {
        $(nextNode).replaceWith('<label for="' + this.id + '">' + nextNode.textContent + '</label>');
      }
    }
  });
});

最终，我需要HTML看起来像这样：

<span class="product_code">TESTPRODUCT</span> 
<br /> 
<table> 
  <td valign="top"></td>
  <td> 
    <input id="5mm" class="WidthRadioClass" name="SELECT___TESTPRODUCT___13" value="5" type="radio" /> 
    <label for="5mm">Size 5</label>
    <input id="6mm" class="WidthRadioClass" name="SELECT___TESTPRODUCT___13" value="6" type="radio" />
    <label for="6mm">Size 6</label>
    <input id="7mm" class="WidthRadioClass" name="SELECT___TESTPRODUCT___13" value="7" type="radio" /> 
    <label for="7mm">Size 7</label>
  </td> 
</table>

任何帮助将不胜感激，谢谢！

Answer 1

尝试下面的摘要或查看此 codepen demo

// list of radio input elements
var els = document.querySelectorAll('input[type="radio"]');
// loop through radio input elements
for (var i = 0; i < els.length; i++) {
  // clear text
  els[i].nextSibling.nodeValue = '';
  // create new elements
  var val = els[i].value,
    label = document.createElement("label");
  label.setAttribute("for", val + "mm");
  label.appendChild(document.createTextNode("Size " + val))
  els[i].id = val + "mm";
  els[i].insertAdjacentElement("afterend", label);
}

<span class="product_code">TESTPRODUCT</span>
<br>
<table>
  <td valign="top"></td>
  <td>
    <input name="SELECT___TESTPRODUCT___13" value="5" type="radio"> Size 5<br>
    <input name="SELECT___TESTPRODUCT___13" value="6" type="radio"> Size 6<br>
    <input name="SELECT___TESTPRODUCT___13" value="7" type="radio"> Size 7<br>
  </td>
</table>

Answer 2

这个小提琴已经覆盖了您。基本上，您可以将HTML作为纯文本抓住，沿<br> s将其拆分，用<label></label>填充它们，然后将其注入到容器中。从那里您可以通过jQuery访问属性和ID，并且可以避免在周围更改节点类型。

要围绕嵌套在标签中的输入工作，您可以在迭代时使用jQuery的insertBefore()方法将输入移到其各自标签外。

var $cell = $('td:nth-of-type(2)'),
    lines = $cell.html().split('<br>');
// wrap the split lines in labels
for (var i = 0; i < lines.length; i++) {
    if (lines[i].length > 2) {
        lines[i] = '<label>'+lines[i]+'</label>';
    }
}
// join back together and inject html
$cell.html(lines.join(''));
// do the fiddling with ids
$cell.find('label').each(function(i) {
    var $this = $(this),
        $input = $this.find('input'),
        value = $input.val();
  $this.attr('for', value+'mm');
  $input.attr('id', value+'mm');
  $input.insertBefore($this)
})