Динамическое добавление некоторого , содержимого из контейнера

#javascript #php #html #css

#javascript #php #HTML #css

Вопрос:

Я должен добавить «n» <span> </ span> (для отображения «n» плоских значков) в div (моя страница .php)

Это div

 <div style="width: 100%;" class="div_icone"></div>
  

Это класс div_icon css

 @media (max-width: 600px) {

    .div_icone {
        overflow: scroll;
        height: 200px;
    }

}
  

Это css-класс icona_ambiente_lista

 .icona_ambiente_lista,{
    cursor: pointer;
    font-family: Flaticon;
    font-size: 30px;
}
  

Это код, который работает так же, как и на изображении ниже

 <div style="width: 100%;" class="div_icone">

    <span class="flaticon-black210 icona_ambiente_lista" style="margin:9px"></span>
    <span class="flaticon-ascendant6 icona_ambiente_lista" style="margin:9px"></span>
    <span class="flaticon-baby67 icona_ambiente_lista" style="margin:9px"></span>
    <span class="flaticon-bedroom2 icona_ambiente_lista" style="margin:9px"></span>
    <span class="flaticon-bicycle12 icona_ambiente_lista" style="margin:9px"></span>
    <span class="flaticon-apple icona_ambiente_lista" style="margin:9px"></span>
    .....                       

 </div>
  

введите описание изображения здесь

я видел, что значков много, я хотел добавить быстрее (через цикл), и я пытаюсь это

 <?php

    $icona = ["black210","ascendant6","baby67","bedroom2","bicycle12","apple","business56","business57","business59","car80","car95","career","clapperboard","clock46","close13","cogs3","dining8","dwelling1","eco5","electronic55","facebook30","family20","family4","film51","fire14","flatscreen","home63","illness","lamp14","laptop44","man204","man77","motorcycle10","personal5","phone16","phone25","plate7","queen9","scooter7","screwdriver3","stair","student13","students3","studio","text87","toolbox3","traffic17","users6","waterdrop1"];

    for($i = 0 ; $i < count($icona) ; $i  ){
        echo "<span class='flaticon-".$icona[$i]." icona_ambiente_lista' style='margin:9px'></span>";
    }

?>
  

или

 <script>

    var icona = ["black210","ascendant6","baby67","bedroom2","bicycle12","apple","business56","business57","business59","car80","car95","career","clapperboard","clock46","close13","cogs3","dining8","dwelling1","eco5","electronic55","facebook30","family20","family4","film51","fire14","flatscreen","home63","illness","lamp14","laptop44","man204","man77","motorcycle10","personal5","phone16","phone25","plate7","queen9","scooter7","screwdriver3","stair","student13","students3","studio","text87","toolbox3","traffic17","users6","waterdrop1"];

    for(var i = 0 ; i < icona.length ; i  ){
        $(".div_icone").append( "<span class='flaticon-" icona[i] " icona_ambiente_lista' style='margin:9px'></span>" );
    }

</script>
  

но результат таков

введите описание изображения здесь

Ответ №1:

Значки были перенесены, потому что у вас изначально были символы новой строки в конце каждой строки. Итак, чтобы получить тот же результат, добавьте пробел или символ новой строки в цикл:

 for ($i = 0; $i < count($icona); $i  ) {
    // --------------------v
    echo "<span ...></span> ";  // or "rn", or PHP_EOL
}