javascript - 动态添加一些 ，将内容移出容器

Question

我应该加上“n” <span> </ span> (显示“n”flaticon-icons)到一个div(我的页面是.php)

这是 div

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

这是 div_icon CSS 类

@media (max-width: 600px) {

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

}

这是icona_ambiente_listaCSS 类

.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>

但是结果是这样的

Answer 1

图标被换行是因为您最初在每一行的末尾都有换行符。因此，为了获得相同的结果，在循环中添加一个空格或换行符:

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