Question

我的网站上有一个表格，其中包含不同产品的选项。我没有把它放在那里，电子商务平台做到了。它列出了表格中一行的选项。该表如下所示：

<div class="attributes">
    <table>
        <tbody>
            <tr>
                <td>Size:</td>
                <td>&nbsp;</td>
                <td><select><option>Sizes here</option></select></td>
            </tr>
        </tbody>
    </table>
</div>

然后，如果有另一个选项，它将在另一行中具有相同的标记。

这会将标签（在这种情况下为大小）渲染到<select>框的前面。我希望标签位于<select>框上方，我认为最简单的方法是关闭<tr>并打开一个新标签。关于如何做到这一点的任何想法？

编辑：我应该提一下，电子商务平台会生成html而我无法访问源代码

Answer 1

假设它遵循那个确切的结构，试试这个：

$(".attributes select").each(function(){
    $label = $(this).parent().prev().prev();
    $label.parent().before("<tr></tr>");
    $label.parent().prev().append($label.clone());
    $label.remove();
    $(this).parent().prev().remove();
});

以下是一个示例：Demo

Answer 2

喜欢这样吗？

<div class="attributes">
    <table>
        <tbody>
            <tr>
                <td>Size:</td>
            </tr>
            <tr>
                <td><select><option>Sizes here</option></select></td>
            </tr>
        </tbody>
    </table>
</div>

Answer 3

我认为你必须分两步完成：

删除元素：

$('.attributes').find('tr:first-child').remove();

$('.attributes').find('tr:first-child').remove();

2.将它们留在同一个地方

$('.attributes').find('tr:first-child').before('<tr><td>Sizes here</td></tr>');

动态关闭和打开表行

3 个答案: