divのグループ化と追加に関する問題

[編集] setTimeoutメソッドを使用して、1秒ごとに6本の水平線を動的に作成しようとしました。したがって、1秒ごとに6本の水平ラインを1つのグループとして表示する必要があります。ここでは、6本の水平線をグループと呼びます。しかし、私は各グループを縦方向ではなく横方向に追加したい。グループを追加しようとするときに、枠の幅が新しいグループを保持するのに十分な長さでない場合は、新しいグループを次の行に追加します。また、6本の水平線の間に「ピラール」が必要です。水平線のグループを8つ作成したいだけです。下の最初の図は、自分のコードを実行した後のものです。もう一つは私が必要なものです。以下のコードは私のhtml、css、jsコードです。誰かが私を助けてくれることを願っている。前もって感謝します。divのグループ化と追加に関する問題

HTML：

<!DOCTYPE html> 
<html> 
<head> 
    <link type="text/css" rel="stylesheet" href="code.css"> 
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script> 
    <link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/themes/smoothness/jquery-ui.css"> 
    <script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script> 
    <script type="text/javascript" src="code_js.js"></script> 
</head> 
<body> 
    <div id = "output"> 

    </div> 

</body> 
</html>

CSS：

.deco { 
    border-bottom: 1px solid black; 
    width: 120px; 
    margin-left:0px; 
    margin-bottom:10px; 
    z-index: 2; 
    position: relative; 
    /*display: inline-block;*/ 
    margin-right: 20px; 
} 


#output { 
    background: #ffe6e6; 
    width: 600px; 
    height: 800px; 
    position:absolute; 
}

JS：

$(document).ready(function() { 

    makeItHappen(0); 
}); 

function makeItHappen(order) { 
    for (var i = 0; i < 7; i++) { 
     var hr = document.createElement('hr'); 
     hr.className = "deco" 
     hr.id = "hr" + i; 
     $('#output').append(hr); 
    } 
    makeTable(function() { 
     if(++order < 7) { 
      makeItHappen(order); 
     } 
    }); 
} 

function makeTable(callback) { 
    setTimeout(function() { 
     callback(); 
    }, 1000); 
}

出典

2016-11-22 vkosyj

を役に立てば幸い – happymacarts

なぜループが4回settimeoutを呼び出すのですか。だから、それぞれのセットで4セットが必要なのですか？6 horizantal lines – Geeky

@happymacartsお返事ありがとうございます。私はテーブルを使用しない理由は、その方法では、テーブル内の水平境界線にIDを割り当てることができないからです。 – vkosyj

あなたは、ディスプレイを使用することができます？あなたは

$(document).ready(function() { 
 

 
    makeItHappen(0); 
 
}); 
 

 
function makeItHappen(order) { 
 
    var output = $("#output"); 
 
    var div = $("<div></div>"); 
 
    div.attr('id', order); 
 
    for (var i = 0; i < 7; i++) { 
 
    var hr = document.createElement('hr'); 
 
    hr.className = "deco" 
 
    hr.id = "hr" + i; 
 
    $(div).append(hr); 
 
    } 
 
    output.append(div); 
 

 
    makeTable(function() { 
 
    if (++order < 7) { 
 
     makeItHappen(order); 
 
    } 
 
    }); 
 
} 
 

 
function makeTable(callback) { 
 
    setTimeout(function() { 
 
    callback(); 
 
    }, 1000); 
 
}

.deco { 
 
    border-bottom: 1px solid black; 
 
    width: 120px; 
 
    margin-left: 0px; 
 
    margin-bottom: 10px; 
 
    z-index: 2; 
 
    position: relative; 
 
    /*display: inline-block;*/ 
 
    margin-left: 10px; 
 
} 
 
#output div:nth-child(2n+1) { 
 
    border-right: 5px solid green; 
 
    margin-top: 5px; 
 
} 
 
#output div:nth-child(2n) { 
 
    border-right: 5px solid green; 
 
    margin-top: 5px; 
 
    height: auto; 
 
} 
 
#output { 
 
    display: flex; 
 
    flex-wrap: wrap; 
 
} 
 
#output { 
 
    background: #ffe6e6; 
 
    width: 500px; 
 
    position: absolute; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div id="output"> 
 

 
</div>

を期待している出力を得るために曲げることが理由だけでテーブルを使用する代わりに、1を偽造しませ

出典

2016-11-23 21:26:25 Geeky

divのグループ化と追加に関する問題

答えて

関連する問題