Question

所以我正在处理一个项目，一个页面一遍又一遍地使用相同的基本代码，我想知道如何更快地复制/粘贴代码721次

＆＃13;

<div class="pokeFloat">
  <div class="pokeDec">
    <p>
      <img class="pokeImg" src="./img/pokeDex#.jpg" />
      <br>
      <small>PokeDex#</small>
      <br>pokemonName
      <br>
      <span class="typeA">TypeA</span class="TypeA"> - <span class="TypeB">TypeB</span class="TypeB">
	</p>
  </div>
</div>

＆＃13;

每次我必须改变pokeDex＃（两次，一次在链接中，另一次在文本中），pokemonName和两种类型，如果有更快的方法来做这件事会很棒

Answer 1

您只能定位父容器，然后使用jQuery创建所需的项目数量。一行HTML ...然后一个jQuery循环用其他所有东西填充容器，721次.....

var num = 721; //number of times you want definitions

for(var i = 1; i <= num; i++) {
    var theContent = $("<p></p>").html('<small>PokeDex #' + i + '</small> : <a href="/path/to/dex' + i +'">Dex ' + i + ' Link</a>'); 
         $('#pHolder').append(theContent);
     }

p { background: #eee; margin: 10px; padding: 5px 10px; }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="pHolder"></div>

vanilla Javascript（没有jQuery）

var elem = document.getElementById("pHolder"); //The holder
 var num = 721; //number of times you want definitions

for(var i = 1; i <= num; i++) {
     var p = document.createElement('p');
     p.innerHTML = '<small>PokeDex #' + i + '</small> : <a href="/path/to/dex' + i +'">Dex ' + i + ' Link</a>';
  elem.appendChild(p);
     }

p { background: #eee; margin: 10px; padding: 5px 10px; }

    <div id="pHolder"></div>

Fiddle with the div...

Answer 2

如果你不能使用服务端技术，或者编译为html的东西作为Haml，并且你想使用javascript和html ......在jquery的帮助下你就不用重新发明轮子了....

一种解决方案是隐藏您用作模板的html。然后，使用jquery（或其他库或vanilla javascript）将其作为字符串抓取，执行替换，然后将生成的字符串作为html插入到dom中。

这是一个只有三次迭代的快速示例。您需要填充每次重复的特定数据。我使用对象列表作为数据。

如果我是你，我会使用像Knockout，Angular或Mustache这样的库。

// Data of each iteration
var data = [
  {name: 'Pikachu', dex: 'pikachuDex', typeA: 'pikachuA', typeB: 'pikachuB'},
  {name: 'Charmander', dex: 'charmanderDex', typeA: 'charmanderA', typeB: 'charmanderB'},
  {name: 'Ratata', dex: 'ratataDex', typeA: 'ratataA', typeB: 'ratataB'}
];
  
// Get the template
var template = $(".pokeFloat").html();

// Iterate over data, customize template, append to html
for(var i = 0; i < data.length; i++) {
  var str = template.replace(/typeA/gi, data[i].typeA);
  str = str.replace(/typeB/gi, data[i].typeB);
  str = str.replace(/pokemonName/gi, data[i].name);
  str = str.replace(/pokeDex/gi, data[i].dex);
  
  $("#list_of_pokemones").append(str)
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="pokeFloat" style="display: none">
      <div class="pokeDec">
        <p>
          <img class="pokeImg" src="./img/pokeDex#.jpg" />
          <br>
          <small>PokeDex#</small>
          <br>pokemonName
          <br>
          <span class="typeA">TypeA</span class="TypeA"> - <span class="TypeB">TypeB</span class="TypeB">
    	</p>
      </div>
    </div>

<div id="list_of_pokemones">
</div>

请注意，我使用display: none隐藏了模板，并添加了一个新的div作为动态生成的html的占位符。

这不是最佳解决方案，但应该让您了解如何做到这一点。

如何在html中重复相同的代码（但每次略有不同）？

2 个答案: