[英]How to append div to row wise in jquery?
在單擊某個按鈕時,我正在尋找 append 使用 ID 的div
,我希望每次按行顯示添加的項目,最多連續顯示 6 個項目。 下面的代碼每次都添加到底部,而不是水平方向。 如何添加如下截圖?
html:
<div id="dashboardArea" class="wrapper">
</div>
jquery代碼:
$(document).ready(function(){
$("#saveProjecttoDash").click(function() {
$('#overlay').fadeOut(300);
let projectName = document.getElementById("enterprojectName").value;
let clientName = document.getElementById('clientNametochoose').value;
var someDiv = '<div class="row"><div class="pull-bottom" style="height:500px;background:#e3e8e7">'+projectName+'<br>'+clientName+'</div></div>';
$('#dashboardArea').append(someDiv);
});
});
// css 用於以下 class:
.pull-bottom {
width: 22%;
margin: 10px 0px 0px 100px;
vertical-align: bottom;
float: none;
webkit-columns: 2 200px;
-moz-columns: 2 200px;
columns: 2 200px;
-webkit-column-gap: 3em;
-moz-column-gap: 3em;
column-gap: 3em;
}
在您的pull-bottom
CSS class 中,在這種情況下應left
float
屬性。
在當前的 state 中,每行將采用全寬度可用。
可能使用網格可以獲得 6 個單元格。
$(document).ready(function() { $("#save").on("click", function() { if ($('#area').children().length == 6) return; $("<div>", { class: "cell", append: `Column - ${$('#area').children().length + 1}`, appendTo: "#area" }) }); });
* { margin: 0; box-sizing: border-box; } #area { display: grid; grid-template-columns: 1fr 1fr 1fr; grid-gap: 1em; }.cell { background: #fafafa; height: 50px; padding: 1em; }
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <button id="save">SAVE</button> <div id="area"></div>
您可以使用flex
:
const NewClientProject = (pName, cName) => { return $("<div>", { class: "cell", append: `${pName||"Project Name"}<br>${cName||"Client Name"}`, appendTo: "#dashboardArea" }); } jQuery( $ => { $("#toDashboard").on("click", function() { $('#overlay').fadeOut(300); NewClientProject($("#pName").val(), $('#cName').val()); }); }); NewClientProject(); NewClientProject();
* {margin:0; box-sizing:border-box;} #dashboardArea { display: flex; flex-flow: row wrap; } #dashboardArea.cell { background: #e3e8e7; flex: 0 0 22%; margin: 1% 1.5%; min-height: 140px; padding: 10px; }
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <input id="pName" placeholder="Project Name" type="text"> <input id="cName" placeholder="Client Name" type="text"> <button id="toDashboard">Save to Dashboard</button> <div id="dashboardArea"></div>
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.