как повторить один и тот же код (но немного по-разному каждый раз) в html?

Question

Так что я работаю над проектом, и одна страница имеет один и тот же базовый код снова и снова, и мне было интересно, как сделать это быстрее, чем копировать/вставки кода 721 раз

<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"> 
 
\t </p> 
 
    </div> 
 
</div>

Каждый раз, когда мне приходилось менять 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>

ваниль 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 (или другую библиотеку или ванильный 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"> 
 
    \t </p> 
 
     </div> 
 
    </div> 
 

 
<div id="list_of_pokemones"> 
 
</div>

Пожалуйста, обратите внимание, что я спрятал шаблон, используя display: none, и добавил новый div в качестве заполнителя для динамически генерируемого HTML.

Это не лучшее решение, но должно дать вам представление о том, как это сделать.