2

我想div在单击按钮时将一些 html 附加到 a 中。唯一需要动态的是它需要有一个不同的 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

将每次要添加的 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 回答
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 回答
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 回答