Как переписать несколько одинаковых div одной строки в HTML?

Question

У меня есть HTML-код, например:

<div class="filter-condition"> Class1 <span class="price"> Span1 </span> </div>
<div class="filter-condition"> Class1 <span class="price"> Span2 </span> </div>
<div class="filter-condition"> Class1 <span class="price"> Span2 </span> </div>
<div class="filter-condition"> Class1 <span class="price"> Span3 </span> </div>
<div class="filter-condition"> Class1 <span class="price"> Span4 </span> </div>

Это хороший способ написать это так?Может быть, есть какой-то более правильный способ вместо того, чтобы писать все время одни и те же элементы div и span?

Answer 1

HTML является статическим, вы не можете генерировать div без их появления в окончательном исходном коде.Вы можете использовать внутренние и внешние языки для автоматической генерации кода, но в конечном итоге браузеру потребуется отрисовывать этот HTML-код.

Если вы хотите избежать написания классов для каждого элемента div и span, вы можете обернуть ихв содержащий div и установить только один класс.

.container div {
  // rules from filter-condition class
}

.container span {
  // rules from price class
}

<div class="container">
  <div> Class1 <span> Span1 </span> </div>
  <div> Class1 <span> Span2 </span> </div>
  <div> Class1 <span> Span2 </span> </div>
  <div> Class1 <span> Span3 </span> </div>
  <div> Class1 <span> Span4 </span> </div>
</div>

Answer 2

Используя только HTML, это так же просто, как написать все именно так, как вы хотите.Поэтому это было бы невозможно.Однако вы можете использовать язык бэкэнда, который будет выводить HTML, чтобы упростить его.

Обычным языком веб-бэкэнда будет PHP.С помощью PHP-файла вы можете ввести следующее:

<?php for ($i = 1; $i < 6; $i++) { ?>
    <div class="filter-condition"> Class1 <span class="price"> Span<?= $i; ?> </span> </div>
<?php } ?>

Это выдаст.

<div class="filter-condition"> Class1 <span class="price"> Span1 </span> </div>
<div class="filter-condition"> Class1 <span class="price"> Span2 </span> </div>
<div class="filter-condition"> Class1 <span class="price"> Span3 </span> </div>
<div class="filter-condition"> Class1 <span class="price"> Span4 </span> </div>
<div class="filter-condition"> Class1 <span class="price"> Span5 </span> </div>

Если у вас также есть 5 классов и вам нужно всего 25 интервалов, вы можете вложитьдва отдельных PHP For Loops, как показано ниже.

<?php for ($i = 1; $i < 6; $i++) { ?>
    <?php for ($x = 1; $x < 6; $x++) { ?>
        <div class="filter-condition"> Class<?= $i; ?> <span class="price"> Span<?= $x; ?> </span> </div>
    <?php } ?>
<?php } ?>

Это выдаст

<div class="filter-condition"> Class1 <span class="price"> Span1 </span> </div>
<div class="filter-condition"> Class1 <span class="price"> Span2 </span> </div>
<div class="filter-condition"> Class1 <span class="price"> Span3 </span> </div>
<div class="filter-condition"> Class1 <span class="price"> Span4 </span> </div>
<div class="filter-condition"> Class1 <span class="price"> Span5 </span> </div>
<div class="filter-condition"> Class2 <span class="price"> Span1 </span> </div>
<div class="filter-condition"> Class2 <span class="price"> Span2 </span> </div>
<div class="filter-condition"> Class2 <span class="price"> Span3 </span> </div>
<div class="filter-condition"> Class2 <span class="price"> Span4 </span> </div>
<div class="filter-condition"> Class2 <span class="price"> Span5 </span> </div>
<div class="filter-condition"> Class3 <span class="price"> Span1 </span> </div>
<div class="filter-condition"> Class3 <span class="price"> Span2 </span> </div>
<div class="filter-condition"> Class3 <span class="price"> Span3 </span> </div>
<div class="filter-condition"> Class3 <span class="price"> Span4 </span> </div>
<div class="filter-condition"> Class3 <span class="price"> Span5 </span> </div>
<div class="filter-condition"> Class4 <span class="price"> Span1 </span> </div>
<div class="filter-condition"> Class4 <span class="price"> Span2 </span> </div>
<div class="filter-condition"> Class4 <span class="price"> Span3 </span> </div>
<div class="filter-condition"> Class4 <span class="price"> Span4 </span> </div>
<div class="filter-condition"> Class4 <span class="price"> Span5 </span> </div>
<div class="filter-condition"> Class5 <span class="price"> Span1 </span> </div>
<div class="filter-condition"> Class5 <span class="price"> Span2 </span> </div>
<div class="filter-condition"> Class5 <span class="price"> Span3 </span> </div>
<div class="filter-condition"> Class5 <span class="price"> Span4 </span> </div>
<div class="filter-condition"> Class5 <span class="price"> Span5 </span> </div>

Если вы хотите избежать использования PHP, вы можете использовать механизмы шаблонов, которые компилируются в простые HTML-файлы.,Это может быть полезно для более сложных шаблонов.

Вы также можете использовать Javascript для достижения этой цели после начальной загрузки страницы, хотя это не рекомендуется.

Answer 3

Да, вы можете легко это сделать, используя JavaScript внутри своего HTML-кода, например: -

...
<div id="top">
</div>
<script>
    var line = '<div class="filter-condition"> Class1 <span class="price"> Span1 </span> </div>';
    var lines = line;
    var number_of_lines = 5;
    for(i = 0; i < number_of_lines; i++){
        lines += line;
    }
    document.getElementById("top").innerHtml += lines;
</script>
...