Php 处理基于通用单一模板的页面上动态生成的唯一DOM的最佳方法是什么？

假设您有一个页面，用户每次单击按钮时都可以在其中创建一个新的、唯一的div。div的内容主要基于服务器端的一个通用单一模板，但由于用户可以创建多个模板，因此必须为每个请求动态生成生成结果div的内容DOMs id，以便能够在以后通过jQuery分别选择每个单独的div及其内容，否则，由于这些div基于相同的模板，它们自然总是具有相同的domid，因此不可能使用jQuery单独选择它们

假设您正在使用javascript和jquery构建一个windows系统。在服务器端，您有一个表示文件夹窗口的模板；该模板有自己的按钮、菜单等，它们都是ID为的dom元素

然后，在页面上，用户应该能够打开多个文件夹窗口，每个窗口在创建时都分配了不同的id，但内容是相同的，因为加载的模板对于所有这些窗口都是相同的。也就是说，如果用户打开3个文件夹窗口，页面中加载的实际标记可能如下所示：

<div id="firstWindow">
    <div id="windowContainer">
        <div id="windowHead">
            stuff
        </div>
        <div id="windowBody">
            <div id="windowInfoButton">stuff</div>
            stuff
        </div>
    </div>
</div>
<div id="secondWindow">
    <div id="windowContainer">
        <div id="windowHead">
            stuff
        </div>
        <div id="windowBody">
            <div id="windowInfoButton">stuff</div>
            stuff
        </div>
    </div>
</div>
<div id="thirdWindow">
    <div id="windowContainer">
        <div id="windowHead">
            stuff
        </div>
        <div id="windowBody">
            <div id="windowInfoButton">stuff</div>
            stuff
        </div>
    </div>
</div>

正如您所看到的，windowContainer、windowHead等都是从同一模板读取的结果。这本身已经很糟糕了，但我需要能够使用jQuery选择每个windowContainer或windowHead，这样在firstWindow中操作它们就不会影响secondWindow，所以简单地将所有ID切换到类是不行的

我认为有两种方法可以解决这个问题：

1由于我直接使用PHP作为模板语言，我可以很容易地附加一些生成随机ID或字符串的代码，并替换每个DOM，例如：

<div id="someFixedID" class="someClass">stuff</div>

为此：

<div id="<?=$someRandomStuff?>someFixedID" class="someClass">stuff</div>

问题是，如果模板有大约20或30个DOM元素，这将极大地污染它，我正在尝试在模板中包含尽可能少的代码，以便能够快速迭代设计

2使用jQuery，可以通过ajax加载模板，遍历div中的每个元素，并在显示之前动态更改它们的ID。这将有助于保持模板干净，但我担心这种方法可能会在客户端增加不必要的开销，因为它可能需要循环使用大约20或30个元素

---

哪种方法在可维护性和性能方面更有意义？有没有其他方法可以解决我没有想到的问题？

如果我了解您的问题，您需要使用唯一id动态创建一个DIV。使用jQuery添加具有唯一id的DIV，然后从服务器端加载这些DIV中的内容。您需要将客户端ID生成代码与服务器端模板名称/内容同步

例如：

HTML:

jQuery：

可能不是一个完美的解决方案，但希望它能给您一个方向。

您可以在Ajax调用的URL中添加一个参数，以获得使用客户端生成的密钥的模板

非常粗糙但不安全的草稿：

在server template.php上：

---

使用比数学更好的东西，比如时间戳、guid等等。。。为了防止冲突。

在本例中，您需要id或唯一id的原因是什么？我想在用户创建生成的div后使用jQuery对其部分内容进行动画制作，但为此，我需要选择特定的div及其内容，因为我不希望在创建新div时对所有创建的div进行动画制作，更具体地说，它不仅仅是在创建div之后的动画，而且特定div本身也应该能够响应某些事件，例如按下一些按钮，这也是由jQuery选择器控制的。尽管如此，在创建它时您将有一个对它的引用：var d=$；，正当我认为解释一下你实际上打算做什么会对你的整个流程有好处；简言之，我需要单独选择它们，不仅是在它们被创建之后，而且还要在以后触发事件。如果我选择问题中描述的方法1，基本上就是这样做的，但我仍然不确定这是否是最好的解决方案不完全是我想要的我已经在这样做了，但我承认我的第一个解释不是很好，所以无论如何我会投赞成票。顺便说一句，我已经更新了解释，你可以检查一下。好的。我又读了一遍你的问题。是的，在一个页面上有重复的ID元素是个坏主意，但在你的情况下你仍然可以单独访问它们。如果在jquery中选择$'firstWindow windowContainer'并执行任何操作，则不会影响$'secondWindow windowContainer'和$'ThirdWindowContainer'。在此处尝试：这样您就可以使用父窗口的DIV IDsfirstWindow、secondWindow、，

---

我以为我之前试过这个，但没用，但它确实奏效了。但我想我会遇到更多的问题，不管怎样，有重复的ID，所以我的问题是使用哪种方法来动态生成它们仍然存在。谢谢你！

<div id='container'></div>
<input type='button' name='create' value='create' id='create'>​

$('#create').live( 'click', function(){   
    var num = $('div.mydiv').length;
    var html = '<div id="myid' + num + '" class="mydiv">My Content ' + num + '</div>';
    $('#container').append(html);       
});​

<div id='<?= $_GET["container_key"] ?>' class='main-container'>
  ....
</div>

var containerKey = Math.random();
$.ajax("/template.php?container_key=" + containerKey, ....)