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() は、要素を自動的に閉じます。テーブルの周りに widebox-middle を挿入するために wrap() を使用してみませんか?

$('#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ではなく要素を追加するため、1つのステートメントで渡す不正な/不完全なhtml有効なものに変換されます...

メソッドをチェックしてください.wrap()-これはあなたが必要とするものです

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

于 2010-04-16T09:47:28.463 に答える
2

.before().after()文字列ではなく要素を挿入します。unclosed<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 に答える