2

ページにボタンがあり、それを押すと、新しい div を追加します (その中にさらに 2 つの div と追加の p タグを追加します)。

これが私がしたいことです：

<div id="mainDiv" draggable="true"  ondragstart="drag(event)">
  <div class="subDiv1">
    <p class="p1">text</p>
    <p class="p2">text</p>
  </div>
  <div class="subDiv2">
    <p class="p3">text</p>
  </div>
</div>

しかし、代わりに次の結果が得られます。

<div id="mainDiv" draggable="true"  ondragstart="drag(event)">
  <div class="subDiv1"></div>
  <p class="p1">text</p>
  <p class="p2">text</p>
  <div class="subDiv2"></div>
  <p class="p3">text</p>
</div>

明らかに、以下のコードに問題がありますが、何が原因かわかりません。append の代わりに appendTo を使用する必要がありますか? その場合、どこで使用しますか?

$(document).ready(function() {
  $("#addButton").click(function() {

    var divToAdd = 
    $('<div id="mainDiv" draggable="true"  ondragstart="drag(event)"></div>')
    .append('<div class="subDiv1">')
    .append('<p class="p1">text</p>')
    .append('<p class="p2">text</p></div>')
    .append('<div class="subDiv2">')
    .append('<p class="p3">text</p></div>');

$('.whereToAddDivs').append(divToAdd);
4

6 に答える 6

1

に次々と追加しているためです#mainDiv。あなたがしたいことは、p最初のものをそれぞれ#subDivに追加してから、それらをに追加すること#mainDivです。

//your main div
var mainDiv = $('MAIN_DIV_HTML');

//creating subdivs and append to mainDiv
var subDiv1 = $('SUB_DIV1_HTML').appendTo(mainDiv);
var subDiv2 = $('SUB_DIV2_HTML').appendTo(mainDiv);

//the first set of p's appending to subdiv 1
var p1 = $('P1_HTML').appendTo(subDiv1);
var p2 = $('P2_HTML').appendTo(subDiv1);

//the next set of p's to subdiv2
var p3 = $('P3_HTML').appendTo(subDiv2);

//append everything
$('.whereToAddDivs').append(mainDiv);

また、この「html in js」アプローチではなく、テンプレート ソリューションについて調査することをお勧めします。口ひげとハンドルバーは初心者に適しているはずです。

于 2013-06-13T07:21:03.833 に答える
1

appendDOM ノードを別の DOM ノードに追加します。HTML 文字列を指定すると、そこから DOM ノードを作成しようとします。一致する終了タグなしで開いた DIV タグを追加しても、閉じられていない DIV ノードは作成されません。そのようなものはないため、最初の追加で完全な DIV が作成されます。次に、それに追加する必要があります。

私は通常、次の方法でノードを生成します。

 $('<div />', { id: 'mainDiv', draggable: 'true', ondragstart: 'drag(event)' })
    .append($('<div />', { 'class': 'subDiv1' })
        .append($('<p/>', { 'class': 'p1', text: 'text' }))
        .append($('<p/>', { 'class': 'p2', text: 'text' }))
    )
    .append($('<div />', { 'class': 'subDiv2' })
        .append($('<p/>', { 'class': 'p3', text: 'text' }))
    )
    .appendTo('.whereToAddDivs');
于 2013-06-13T07:23:01.680 に答える
0

要件はネストされていますが、コードはネストされていません。必要なネストをコードと一致させるだけです。

var divToAdd = $('<div id="mainDiv" draggable="true"  ondragstart="drag(event)"></div>')
    .append(
      $('<div class="subDiv1">').append('<p class="p1">text</p>')
                                .append('<p class="p2">text</p>')
    )
    .append(
      $('<div class="subDiv2">').append('<p class="p3">text</p></div>')
    );

    $('.whereToAddDivs').append(divToAdd);

実際の例: http://jsfiddle.net/SRJHY/

に関する最後の少しの混乱についてはappendTo、それを使用してサンプルコードの最後の行を無効にし、次のdivように新しく作成されたをコンテナに追加できます。

$('<div id="mainDiv" draggable="true"  ondragstart="drag(event)"></div>')
    .append(
      $('<div class="subDiv1">').append('<p class="p1">text</p>')
                                .append('<p class="p2">text</p>')
    )
    .append(
      $('<div class="subDiv2">').append('<p class="p3">text</p></div>')
    )
    .appendTo('.whereToAddDivs');

実際の例: http://jsfiddle.net/LQJbz/

于 2013-06-13T07:23:49.983 に答える
0

jQuery .append() 関数は、新しく追加された要素ではなく、.append() を呼び出した最初の要素を返します。つまり、 $().append().append().append() は常に $() 要素への一連の追加として機能します。

あなたの場合、次のように追加する必要があります。

$(document).ready(function() {
  $("#addButton").click(function() {

    var divToAdd = 
    $('<div id="mainDiv" draggable="true"  ondragstart="drag(event)"></div>')
    .append($('<div class="subDiv1"></div>').append('<p class="p1">text</p>').append('<p class="p2">text</p>'))
    .append($('<div class="subDiv2"></div>').append('<p class="p3">text</p>'));

$('.whereToAddDivs').append(divToAdd);
于 2013-06-13T07:30:27.810 に答える
0

複数のアペンドを使用する理由 あなたはそのようにそれを行うことができますが、なぜこれをしないのですか:

$('<div id="mainDiv" draggable="true"  ondragstart="drag(event)"></div>')
.append('<div class="subDiv1"><p class="p1">text</p><p class="p2">text</p></div><div class="subDiv2"><p class="p3">text</p></div>');

これはより高速で、エラーが発生しにくくなります。本当に複数の追加を使用する必要がある場合は、各子を正しい親に追加する必要があります。既存のメソッドは、すべての子要素を #mainDiv に追加します。

于 2013-06-13T07:22:53.783 に答える
0

試す

var divToAdd = 
    $('<div id="mainDiv" draggable="true"  ondragstart="drag(event)"></div>')
    .append($('<div class="subDiv1" />').append('<p class="p1">text</p>').append('<p class="p2">text</p>'))


    .append($('<div class="subDiv2"/>').append('<p class="p3">text</p>'))
;
于 2013-06-13T07:22:58.793 に答える