修复此单选按钮HTML的最佳方法是什么？

Question

我正在使用推出一些相当老式HTML的购物车产品。由于它是由购物车PDG Commerce动态生成的，因此我无法控制HTML标记结构。

以下是一个示例：

<p class='ups_address_suggest'>
    <input type="radio" name="addrvalselect" value="3" onclick="setaddr2();">DULUTH, MN &nbsp;&nbsp;55810 
    <input type="radio" name="addrvalselect" value="4" onclick="setaddr3();">DULUTH, MN &nbsp;&nbsp;55811 
    <input type="radio" name="addrvalselect" value="5" onclick="setaddr4();">DULUTH, MN &nbsp;&nbsp;55812 
    <input type="radio" name="addrvalselect" value="6" onclick="setaddr5();">HERMANTOWN, MN &nbsp;&nbsp;55810 
    <input type="radio" name="addrvalselect" value="7" onclick="setaddr6();">HERMANTOWN, MN &nbsp;&nbsp;55811 
    <input type="radio" name="addrvalselect" value="8" onclick="setaddr7();">BOWDON JUNCTION, GA &nbsp;&nbsp;30109 
</p>

如上图所示，它会输出单词旁边带有文字的单选按钮，这些按钮不在标签元素中。

我正在尝试这样做，所以看起来不错。到目前为止，我已经尝试将CS​​S应用于输入元素（显示：块，浮动：左边等），但是这些文本会留在奇怪的位置，如下一行，或者当按钮向左浮动时将所有文本聚集在一起。

使用jQuery，到目前为止，我无法将文本和输入作为一个单元将它们包装在标签或<p>或其他任何内容中。

以下是当前输出在浏览器中的显示方式：

有关javascript和/或jQuery方法的任何建议吗？或者只使用CSS将按钮整齐地放在文本标签旁边。

Answer 1

这适用于控制台（Chrome）：

jQuery的：

$('p.ups_address_suggest input').each(function (i, elem) {
    var self = $(elem),                             // cache DOM lookup
        text = $(elem.nextSibling).detach(),        // remove text and jQuerify
        label = $('<label />').text(text.text());   // add to a new label
    label.insertAfter(self);                        // insert label into DOM
});

CSS：

p.ups_address_suggest input, p.ups_address_suggest label {float: left;}
p.ups_address_suggest input {clear: left;}

这是一个小提琴：http://jsfiddle.net/xb42s/

Answer 2

这是我提出的解决方案。它并不完美，但适用于这种情况：

$('p.ups_address_suggest').html(
    $('p.ups_address_suggest').html().replace(/(\<input.*?\d{5})/g,'<label>$1</label>')
);

正则表达式从<input..搜索到5位数并将其包装在标签中。这应该会给你更多的造型选择。

http://jsfiddle.net/nxFbN/

Answer 3

如果你希望它们是内联的，那么将每对输入/文本放在一个范围内，否则放在一个p中（或者在每次输入后使用br），它应该看起来更整洁。