附加HTML块“;更多的次数”;通过避免代码重复

Attach an HTML block "more times" by avoiding code repetitions

本文关键字：代码 HTML 附加      更新时间：2023-09-26

假设我有一个块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附加到两个容器中。

哪种方法最好？

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

您可以通过

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

但要注意，本我将被重复。这使得html无效。

演示

在将它们放入DOM、后，您可以通过给它们唯一的id来避免冗余

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

演示

如果myBoxClass的给定html结构与您在这里显示的不同，通过带有id的附加元素，那么您应该按照T.J所说的编写代码

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

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

但是，请确保迭代ID，因为它们必须是唯一的(例如#myBox1和#myBox2(

你可以这样做，

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

以上代码将选择所有id以container 启动

Fiddle

在jquery 中使用.outerHtml

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

DEMO

您可以通过将代码添加到一个单独的页面并使用.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>

克隆您的html标记。

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

您可以使用：

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

或

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

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);
相关文章：