Question

假设我的块myBox定义如下：

<div class="myBoxClass" id="myBox">
    <h1>My Box</h1>
    <a href="#"><img src="http://placehold.it/350x150" alt="My Picture" /></a>
    <p>Lorem Ipsum...</p>
</div>

然后，我定义了两个容器，containerA和containerB：

<div id="containerA">
    <!-- Attach MyBox -->
</div>
<div id="containerB">
    <!-- Attach MyBox -->
</div>

我希望通过避免代码重复将MyBox附加到两个容器中。

这是最好的方法吗？

注意：我正在寻找客户端解决方案，这对于定义一些响应部分非常有用。

Answer 1

你可以通过

来做到这一点

$("#containerA,#containerB").html($('.myBoxClass').clone());

但请注意，id会重复出现。这使得html 无效。

DEMO

您可以通过在将它们放入DOM后为其提供唯一ID来避免冗余，

$("#containerA,#containerB")
     .html($('.myBoxClass').clone())
          .find('.myBoxClass').attr('id', function (i,val) {
                 return val + (i+1);
            });

DEMO

如果myBoxClass的给定html结构与此处显示的内容不同，通过带有id的其他元素，则应按照 TJ 所述编写代码，

 $("#containerA,#containerB")
         .html($('.myBoxClass').clone())
              .find('[id]').attr('id', function (i,val) {
                     return val + (i+1);
                });

Answer 2

服务器端选项是将myBox包装在PHP函数（或其他一些服务器端语言）中，该函数回显/返回HTML并在您的注释位置调用所述函数。客户端选项是使用Javascript / jQuery执行相同操作。两者都是相对简单的实现，所以除非你需要一个例子，否则我不会烦恼（但是如果没有关于你的网站/设置的更多信息，很难推荐使用哪些）。

但是，请务必重复ID，因为它们必须是唯一的（例如#myBox1和#myBox2）

Answer 3

您可以使用：

$("[id^=container]").append($(".myBoxClass").clone());

或者

$("[id^=container]").html($(".myBoxClass").clone());

Answer 4

你可以这样做，

$("[id^=container]").append($(".myBoxClass").clone());

以上代码将使用container

选择所有ID的开头

Fiddle

Answer 5

在jquery中使用.outerHtml

$("[id^=container]").append($('#myBox')[0].outerHTML);

DEMO

Answer 6

您可以将我的代码添加到单独的页面并使用.load（）JQuery函数将其加载到您想要的位置。

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>load demo</title>
  <style>
  body {
    font-size: 12px;
    font-family: Arial;
  }
  </style>
  <script src="//code.jquery.com/jquery-1.10.2.js"></script>
</head>
<body>

<b>Projects:</b>
<ol id="new-projects"></ol>

<script>
$( "#something-new" ).load( "/resources/myBox.html #box li" );
</script>

</body>
</html>

Answer 7

克隆你的html标签。

 $("#containerA,#containerB").html($('.myBoxClass').clone());

Answer 8

var myBox=$(
                 '<div class="myBoxClass" id="myBox">'
                +'<h1>My Box</h1>'
                +'<a href="#"><img src="myPic.png" alt="My Picture" /></a>'
                +'<p>Lorem Ipsum...</p>'
                +'</div>'
           );

现在你有了一个Jquery对象。

随时随地使用。

$('#containerA').append(myBox);
 $('#containerB').append(myBox);

附加一个HTML块＆＃34;更多次＆＃34;通过避免代码重复

8 个答案:

DEMO

DEMO