Question

我希望在很多地方使用/嵌入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个位置，则必须仅发送一次，然后将其操作到所有n个不同的位置。因此，在服务器端执行它没有意义，Ajax将添加传输重载，因为它是一个单独的调用。

我认为html / css中没有任何内容可以这样做，即使iframe也不能用于此目的。不过我肯定，javascript / jQuery可以这样做。怎么样？

Answer 1

我真的建议您查看Handlebars（js框架）。简而言之，它是一个js模板框架。 http://handlebarsjs.com/
在这种情况下，我建议您使用requirejs使用html片段定义模块，然后无论何时需要使用它，您都可以要求它并将模板编译成您想要的模板。
此外，您可以使用jquery或其他js lib来更改html元素的属性，正如Philip Walton所说。 $（ “UL”）。当量（0）.removeClass（ “右”）。addClass（ “左”）

Answer 2

我能看到的最佳选择是使用javascript。您可以使用JQuery轻松语法。只需在一个变量中定义此可重用标记，然后通过设置left和right div的innerHtml将其插入文档就绪事件的不同位置。

$(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"));
});

Answer 3

如果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 MVC框架，如Backbone.js http://documentcloud.github.com/backbone/

在页面中的多个位置嵌入一次声明的html内容

3 个答案: