Question

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

通过JQuery，我需要根据单选按钮的值和放大器为每个单选按钮添加一个id标签。添加一个类＆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

This fiddle让你满意。基本上，您可以将HTML作为纯文本抓取，将其沿<br>拆分，用<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)
})

jQuery get＆amp;替换无线电输入中的html以添加标签标签

2 个答案: