0

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 将我的元素与上面的多行表一起包装？

4

1 回答 1

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);

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

于 2012-07-10T08:02:11.470 回答