我試圖使我的卡片水平，但問題是我有一個 ajax 來獲取我的數據并且它是動態的我的頁面中每行只需要兩張卡片這是我的ajax腳本代碼for(i=0; i<data.length; i++){ html +='<div class="col-md-6">'+ '<div class="card" style="width: 15rem; text-align:center;display:inline-block;">'+ '<div class="card-body">'+ '<h5 class="card-title">'+data[i].group_name+'</h5>'+ '<h6 class="card-subtitle mb-2 text-muted">Modify your Group</h6>'+ '<a href="javascript:;" class="btn btn-info item-edit" data="'+data[i].id+'"><span class="iconify" data-icon="feather:edit" data-inline="false"></span></a> '+ '<a href="javascript:;" class="btn btn-primary item-delete" data="'+data[i].id+'"><span class="iconify" data-icon="dashicons:remove" data-inline="false"></span></a>'+ '</div>'+ '</div>'+ '</div><hr>'; }$('#showdata').html(html);并在html中 <div class="container"> <div class="row"> <div id="showdata"></div> </div> </div>
1 回答
莫回無
TA貢獻1865條經驗 獲得超7個贊
我認為你所擁有的大部分都很好。而不是更新單獨的 html，<div id='showdata'>將其與您的行結合起來。
<div class="container"> <div id='showdata' class="row"></div> </div>
ITMISS
TA貢獻1871條經驗 獲得超8個贊
您最終需要有 div 的容器 > 行 > 列排列（網格布局）：
<div class="container">
? <div class="row">
? ? <div class="col-md-6">
? ? ? One of two columns
? ? </div>
? ? <div class="col-md-6">
? ? ? One of two columns
? ? </div>
</div>
您可以將 html 寫入帶有.row類的父 ie div 中，因為div#showdata沒有.row類：
$('#showdata').parent().html(html);
const data = [{
? group_name: 'group 1',
? id: 1
}, {
? group_name: 'group 2',
? id: 2
}];
let html = '';
for (i = 0; i < data.length; i++) {
? html += '<div class="col-md-6">' +
? ? '<div class="card" style="width: 15rem; text-align:center;display:inline-block;">' +
? ? '<div class="card-body">' +
? ? '<h5 class="card-title">' + data[i].group_name + '</h5>' +
? ? '<h6 class="card-subtitle mb-2 text-muted">Modify your Group</h6>' +
? ? '<a href="javascript:;" class="btn btn-info item-edit" data="' + data[i].id + '"><span class="iconify" data-icon="feather:edit" data-inline="false"></span></a> ' +
? ? '<a href="javascript:;" class="btn btn-primary item-delete" data="' + data[i].id + '"><span class="iconify" data-icon="dashicons:remove" data-inline="false"></span></a>' +
? ? '</div>' +
? ? '</div>' +
? ? '</div><hr>';
}
$('#showdata').parent().html(html);
<link rel="stylesheet" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="container">
? <div class="row">
? ? <div id="showdata"></div>
? </div>
</div>
或者你可以將 id 賦予.rowdiv：
$('#showdata').html(html);
<div class="container">
? ?<div id="showdata" class="row">
? ?</div>
</div>
const data = [{
? group_name: 'group 1',
? id: 1
}, {
? group_name: 'group 2',
? id: 2
}];
let html = '';
for (i = 0; i < data.length; i++) {
? html += '<div class="col-md-6">' +
? ? '<div class="card" style="width: 15rem; text-align:center;display:inline-block;">' +
? ? '<div class="card-body">' +
? ? '<h5 class="card-title">' + data[i].group_name + '</h5>' +
? ? '<h6 class="card-subtitle mb-2 text-muted">Modify your Group</h6>' +
? ? '<a href="javascript:;" class="btn btn-info item-edit" data="' + data[i].id + '"><span class="iconify" data-icon="feather:edit" data-inline="false"></span></a> ' +
? ? '<a href="javascript:;" class="btn btn-primary item-delete" data="' + data[i].id + '"><span class="iconify" data-icon="dashicons:remove" data-inline="false"></span></a>' +
? ? '</div>' +
? ? '</div>' +
? ? '</div><hr>';
}
$('#showdata').html(html);
<link rel="stylesheet" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="container">
? <div id="showdata" class="row">
? </div>
</div>
獎勵：您可以.row?div根據數據索引打開和關閉 s：
const data = [{
? group_name: 'group 1',
? id: 1
}, {
? group_name: 'group 2',
? id: 2
}, {
? group_name: 'group 3',
? id: 3
}, {
? group_name: 'group 4',
? id: 4
}, {
? group_name: 'group 5',
? id: 5
}];
let html = '';
for (i = 0; i < data.length; i++) {
? if (i % 2 == 0) {
? ? html += '<div class="row">';
? }
? html += '<div class="col-md-6">' +
? ? '<div class="card" style="width: 15rem; text-align:center;display:inline-block;">' +
? ? '<div class="card-body">' +
? ? '<h5 class="card-title">' + data[i].group_name + '</h5>' +
? ? '<h6 class="card-subtitle mb-2 text-muted">Modify your Group</h6>' +
? ? '<a href="javascript:;" class="btn btn-info item-edit" data="' + data[i].id + '"><span class="iconify" data-icon="feather:edit" data-inline="false"></span></a> ' +
? ? '<a href="javascript:;" class="btn btn-primary item-delete" data="' + data[i].id + '"><span class="iconify" data-icon="dashicons:remove" data-inline="false"></span></a>' +
? ? '</div>' +
? ? '</div>' +
? ? '</div>';
? if (i % 2 == 1) {
? ? html += '</div>';
? }
}
$('#showdata').html(html);
<link rel="stylesheet" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="showdata" class="container">
</div>
- 1 回答
- 0 關注
- 117 瀏覽
添加回答
舉報
0/150
提交
取消