簡體   English   中英

如何 append div 在 jquery 中按行排列?

[英]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 中,每行將采用全寬度可用。

小提琴: https://jsfiddle.net/fh42xatu/

可能使用網格可以獲得 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.

 
粵ICP備18138465號  © 2020-2024 STACKOOM.COM