Question

jQuery .wrap()函数允许您使用一些自定义HTML包装任何匹配的元素。但是，该函数不允许您指示HTML中您希望匹配元素的位置 - 它始终插入最内层元素 。

我需要用一个相当基本的表包装一个div（为了给它添加圆角），但唯一的问题是表有两行，我希望我的元素出现在第二行。例如：

$("#my-div").wrap('<table> \
                        <tr> \
                            <td class="corner-topleft" colspan="2"></td> \
                            <td class="corner-topright"></td> \
                        </tr> \
                        <tr> \
                            <td class="corner-bottomleft"></td> \
                            <td class="DIV-SHOULD-APPEAR-HERE"></td> \
                            <td class="corder-bottomright"></td> \
                        </tr> \
                    </table>');

如果您尝试执行此脚本，wrap（）函数会自动将匹配的元素放在第一个表格单元格中（即“corner-topleft”），因为这是“第一个最内层元素” ”

如何使用jQuery将元素包装在上面的多行表中？

Answer 1

您必须手动执行此操作，如下所示：

var div = $('#my-div');
var table = $('<table> \
                        <tr> \
                            <td class="corner-topleft" colspan="2"></td> \
                            <td class="corner-topright"></td> \
                        </tr> \
                        <tr> \
                            <td class="corner-bottomleft"></td> \
                            <td class="DIV-SHOULD-APPEAR-HERE"></td> \
                            <td class="corder-bottomright"></td> \
                        </tr> \
                    </table>');
table.find('.DIV-SHOULD-APPEAR-HERE').append(div.clone());
// Have to clone the div, because of the possible 
// circular reference in next line.
div.replaceWith(table);

我没有测试它，但即使它不起作用，那么你应该理解这个想法。

jQuery：如何用表（包含多行）包装元素？

1 个答案: