在页面中的多个位置嵌入曾经声明过的html内容。
我希望在许多地方使用/嵌入html内容(在本例中是列表<ul>)，但在一个页面中只声明一次。
例如，考虑以下内容：
<ul>
<li>A</li>
<li>B</li>
<li>...</li>
<li>X</li>
</ul>现在，需要在许多地方使用这些内容，如下所示：
使用1：
<div class='left'>
<ul id='listA'>
<li>A</li>
<li>B</li>
<li>...</li>
<li>X</li>
</ul>
</div使用2：
<div class='right'>
<ul id="listX">
<li>A</li>
<li>B</li>
<li>...</li>
<li>X</li>
</ul>
</div>我确信这可以在服务器端完成，也可以通过客户端的Ajax调用来完成，但目标是优化/减少为每个页面请求发送的html内容(字节数据)。因此，如果该特定内容出现在页面中的n places中，则必须只发送一次，然后在那里对所有n不同位置进行操作。因此，在服务器端这样做是没有意义的，而且Ajax将增加传输重载，因为它是一个单独的调用。
我假设html/css中没有任何东西可以这样做，甚至iframe也不能用于此目的。不过，我确信javascript/jQuery可以做到这一点。多么?
回答 3
Stack Overflow用户
发布于 2012-01-12 05:10:25
如果HTML已经出现在页面的某个地方，您可以将其复制到jQuery中，更改需要更改的内容，然后将其插入其他地方。
例如，如果页面上唯一的内容是<ul>，您可以这样做：
var originalUL = $("ul");
$("body").append($('<div class="left" />').append(originalUL.clone().attr('id', 'listA')));
$("body").append($('<div class="right" />').append(originalUL.clone().attr('id', 'listB')));下面是一个例子：http://jsfiddle.net/uU7cV/
但是，如果您要做很多事情，并且每个实例的更改都很复杂，那么我将考虑使用Javascript模板系统或Javascript框架(如Backbone.js http://documentcloud.github.com/backbone/ )
Stack Overflow用户
发布于 2012-01-12 05:00:39
，
- ，我真的建议你看一下车把(js框架)。简而言之，它是一个js模板框架。在这种情况下，我建议您使用http://handlebarsjs.com/
- In使用html片段来定义模块，然后无论何时需要使用它，您都可以需要它并将模板编译成您想要的。
- 也可以使用jquery或其他js来更改html元素的属性，就像Philip所说的那样。$("ul").eq(0).removeClass("right").addClass("left")
Stack Overflow用户
发布于 2012-01-12 04:58:16
我看到的最佳选择是使用javascript。您可以使用JQuery来简化语法。只需在一个变量中定义这个可重用标记，并通过设置您的innerHtml和right div，在document上的不同位置插入它。
$(document).ready(function() {
var reusablehtml ="<ul id='nameplaceholder'><li>A</li><li>B</li><li>...</li><li>X</li></ul>";
$("#left").html(reusablehtml.replace("nameplaceholder", "listA"));
$("#right").html(reusablehtml.replace("nameplaceholder", "listX"));
});https://stackoverflow.com/questions/8830309
复制相似问题
腾讯云开发者
