2

divボタンがクリックされたときにいくつかのhtmlを追加したいと思います。それについて動的である必要がある唯一のことは、それが別のIDを持っている必要があるということです。それ以外の場合は、その上に同じhtmlがあります。したがって、私がこのような構造を持っている場合：

<div id="container">
   <div id="div1" class="inner">
       <p id="P1">Some content</p>
   </div>
   <div id="div2" class="inner">
       <p id="P2">Some content</p>
   </div>
</div>

コンテナの最後に追加したい

  <div id="div3" class="inner">
         <p id="P3">Some content</p>
  </div>

このHTMLを保存するための良い方法は何でしょうか？すべてをphpページに保存し、新しいdivのIDをインクリメントする番号を投稿しますか？または、htmlを文字列内に配置し、正規表現ですべての数値をインクリメントする方が賢明です。または、私が完全に見逃していた、これを行うための信じられないほど明白な方法がありますか。

Jqueryはオプションです。これは、すでにページにあるためです。

また、この質問の自由度が高すぎると思われる場合は、コメントで、閉じる前に変更する方法を教えてください。

どうもありがとうございます。

4

3 に答える 3

1

これまでのコメントへの回答（つまり、IDはそれほど重要ではなく、コンテンツに入力要素がある）に基づいて、HTMLを次のようにやり直したいと思います。

<div id="container">
   <div class="inner">
       <p><input type="text" name="order_item[]" value="" /></p>
   </div>
   <div class="inner">
       <p><input type="text" name="order_item[]" value="" /></p>
   </div>
</div>

IDはもう存在しないことに注意してください。入力要素に配列表記を使用して、受信スクリプトに配列として投稿されるようにしました（javascriptでカウンターをインクリメントしたり、投稿されたさまざまな変数名をPHPで使用可能な配列に解析したりする必要がなくなりました。サーバー上）。

そして、jQueryでこのようなものを使用します

$('#button_id').click(function() {
    $('#container > div.inner:last').clone().val('').appendTo('#container');
});
于 2012-11-12T23:40:16.127 に答える
1

毎回追加するHTMLを非表示のdivに入れ、jQueryを使用してそれをコピーして関連する場所に追加します。例えば：

<div id="appendContents" style="display:none;">
  <div class="inner">
    <p id="P3">Some content</p>
  </div>
</div>

次にjquery：

var shownDivs = <?php echo $numberOnScreenFromBeginning;?>;
$('#theButtonYouWantClickable').click(function()
{
   var newContent = $('#appendContents').clone();
   newContent.$('div.inner').get(0).id = 'div'+shownDivs;
   newContent.$('div.inner p').get(0).id = 'P'+shownDivs;
   // Where does P content come from??
   shownDivs++;
   $('#container').append(newContent);
});
于 2012-11-12T23:22:51.653 に答える
0

これを試してください：作業デモ http://jsfiddle.net/eNXmr/

以下のコードでは、divの長さを計算するため、idを1、2、3以降に動的に設定します。

それがあなたのニーズに合うことを願っています:)

使用するAPI：http: //api.jquery.com/append/

コード

  $('#hulk').click(function() {
    alert("Total div inside ==> " + $('#container').find('.inner').length);

    var next_num = parseInt($('#container').find('.inner').length) + 1;

    $('#container').append(' <div id="div' + next_num + '" class="inner"><p id="P' + next_num + '">Some content</p></div>');

});​
​

HTML

<div id="container">
   <div id="div1" class="inner">
       <p id="P1">Some content</p>
   </div>
   <div id="div2" class="inner">
       <p id="P2">Some content</p>
   </div>
</div>

<input type="button" value="Click hulk" id="hulk" />​
于 2012-11-12T23:29:13.710 に答える