javascript - 修复此单选按钮 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>

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

我正在尝试设计它以使其看起来不错。到目前为止，我已经尝试将 CSS 应用于输入元素(display:block、float:left 等)，但是这会将文本留在奇怪的地方，例如下一行，或者在按钮向左浮动时全部聚集在一起。

到目前为止，我无法使用 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;}

这是一个 fiddle :http://jsfiddle.net/xb42s/