Fizz buzz Jquery Down and then

Question

私はjquery fizzのバズを提供していましたが、出力をフィルタリングする必要がありました。そこには100の結果があり、10x10のグリッドに格納する必要があります。私は大声ではありませんテーブルの私の人生のために私はそれを把握することはできません！

  $(document).ready(function() { 

      var fizzbuzzList = $('#fizzbuzz-list'); 

      for (var i = 1; i <= 100; i++) { 
       var output = i; 
       // if i is divisible by 3 
       if (i % 3 === 0) { 
        output = '<div class="fizz">fizz</div>'; 
       } 
       // if i is divisible by 5 
       if (i % 5 === 0) { 
        output = '<div class="buzz">buzz</div>'; 
       } 
       // if i is not divisble by 3 or 5 
       if (i % 15 === 0) { 
        output = '<div class="fizzbuzz">fizz buzz</div>'; 
       } 

       fizzbuzzList.append($('<div class="output">' + output + '</div>')); 
      } 

     }); 

    <div id="fizzbuzz-list"></div> 

Answer 1

あなたが探していることを理解している場合、最初の列に1-10、2番目の列に11-20などの結果が必要ですか？あなたはそれをflexboxを使って簡単に行うことができます。

親の#fizzbuzz-listコンテナの固定高さと幅を、ハウジングの高さが10の高さと幅が10の固定幅の「出力」要素に基づいて設定し、列レイアウトを使用してフレックスボックスとして設定します。

これはそれを行う必要があります：あなたが欲しいしかし

var fizzbuzzList = document.getElementById("fizzbuzz-list"); 
 

 
for (var i = 1; i <= 100; i++) { 
 
    var output = i; 
 
    // if i is divisible by 3 
 
    if (i % 3 === 0) { 
 
    output = '<div class="fizz">fizz</div>'; 
 
    } 
 
    // if i is divisible by 5 
 
    if (i % 5 === 0) { 
 
    output = '<div class="buzz">buzz</div>'; 
 
    } 
 
    // if i is not divisble by 3 or 5 
 
    if (i % 15 === 0) { 
 
    output = '<div class="fizzbuzz">fizz buzz</div>'; 
 
    } 
 
    
 
    fizzbuzzList.innerHTML = fizzbuzzList.innerHTML + '<div class="output">' + output + '</div>'; 
 
}

#fizzbuzz-list { 
 
    display: flex; 
 
    flex-flow: column wrap; 
 
    justify-content: flex-start; 
 
    align-items: flex-start; 
 
    align-content: flex-start; 
 
    height: 420px; /* sized for 10 elements @40px high + 2px of borders */ 
 
    width: 420px; /* sized for 10 elements @40px wide + 2px of borders */ 
 
} 
 

 
.output { 
 
    height: 40px; 
 
    width: 40px; 
 
    border: 1px solid #000000; 
 
}

<div id="fizzbuzz-list"></div>

あなたは明らかボックスのスタイルを設定することができます。私はそれを簡単に保った。また、JavaScriptをバニラに調整して、埋め込みスニペットで実行しました（jQueryを使用できるのであれば、埋め込みスニペットを十分に理解していません）。

最後に、旧式のブラウザ（特にIE）をサポートする必要がある場合は、フレックスボックスCSSのブラウザプレフィックスルールをいくつか含める必要があります。 https://scotch.io/tutorials/a-visual-guide-to-css3-flexbox-propertiesにはCSSのフレックスボックスに関する情報がたくさんありますが、IE固有の古い構文の一部はhttp://zomigi.com/blog/flexbox-syntax-for-ie-10/にあります。

このすべてが役立ちます。