1

我的标记中有一个表格，我想在上面添加一些 div，如下所示：

<div class="widebox">
<div class="widebox-header">Opret/rediger bruger</div>
<div class="widebox-middle">
<table id="Table3"></table>
</div>
<div class="widebox-bottom"></div>
</div>

我正在尝试使用 jQuery 来执行此操作，如下所示：

$('#Table3').before('<div class="widebox"><div class="widebox-header">Opret/rediger bruger</div><div class="widebox-middle">');
$('#Table3').after('</div><div class="widebox-bottom"></div></div>');

然而，这是呈现出来的，该方法似乎关闭了我的开放 div：

<div class="widebox">
    <div class="widebox-header">Opret/rediger bruger</div>
    <div class="widebox-middle"></div></div><!-- unexpected close divs -->
    <table id="Table3"></table>
<div class="widebox-bottom"></div>

有谁知道这可能是什么原因造成的？

4

4 回答 4

4

before() 和 after() 自动关闭元素。为什么不尝试使用 wrap() 在桌子周围插入widebox-middle？

$('#Table3').wrap('<div class="widebox-middle" />');
$('.widebox-middle').wrap('<div class="widebox" />');
$('.widebox-middle').before('<div class="widebox-header">Opret/rediger bruger</div>');
$('.widebox-middle').after('<div class="widebox-bottom"></div>');
于 2010-04-16T09:52:41.283 回答
2

.before和方法需要描述 DOM 树的.after一个完全定义的部分——也就是说，每个调用都必须包含开始和结束标记——这些方法添加元素，而不是原始 html，因此您使用任何一个语句传入的任何格式错误/不完整的 html将被转换为有效的东西......

查看.wrap()方法 - 这就是您所需要的

http://api.jquery.com/wrap/

于 2010-04-16T09:47:28.463 回答
2

.before()并.after()插入元素，而不是字符串。未关闭<div>的元素不是完整的元素，因此它会自动关闭。您想要的是使用该.wrap()功能将新的包装<div>在桌子周围。例如：

$('#Table3').wrap('<div class="widebox-middle" />');
于 2010-04-16T09:48:09.897 回答
1

你可以.wrap()用这些 div 表。但在这种情况下，我更愿意将表格从 DOM 中取出，创建新的 DOM 结构并将其插入回来，例如：

var myTable   = $('#Table3'),
    root      = myTable.parent(),
    DOMStruct = $('<div class="widebox"><div class="widebox-header">Opret/rediger bruger</div><div class="widebox-middle"></div><div class="widebox-bottom"></div></div>');

myTable.detach();

DOMStruct.find('.widebox-middle').append(myTable);
root.append(DOMStruct);
于 2010-04-16T09:56:36.010 回答