从共享点列表中提取数据后，如何在 jQuery 中创建行和列

Question

我在JavaScript中创建了一个包含7个类别的手风琴，我还从Share Point列表中提取数据并按类别过滤项目。按类别过滤项目并将其附加到其各自的类别面板后，我想创建 4 列以及从列表中提取的项目所需的任何行。附上所需的最终结果。

附上所需的最终结果。 手风琴期望的结果

$(document).ready(function () {
$.ajax({
url: "http://bc-net/_api/web/lists/GetByTitle('specialDiscounts')/items",
method: 'GET',
headers: {
'Accept': 'application/json; odata=verbose'
},
success: function (data) {
var items = data.d.results;
console.log(items);
var auto = $('#automotive');
var entertainment = $('#entertainment');
var healthBeauty = $('#healthBeauty');
var travel = $('#travel');
var electronics= $('#electronics');
var services= $('#services');
var housing= $('#housing');

for (var j = 0; j < items.length; j++) {
var panelsContent ='<div class="row animated fadeInUp">' +
'<div class="col-md-4">' +
'<div class="card-body card-body-cascade text-center">' +
'<a href=" ' + items[j].Link.Url + '" target = _blank> <h4 class="card-title my-4"><strong>' + items[j].Title +
'</strong></h4></a><p class="card-text">' + items[j].Description + '</p>'                   

// branching logic,
// append the <p> in different places based on
// different possible Category values
switch (items[j].Category) {
case 'Automotive':
auto.append(panelsContent);
break;
case 'Entertainment':
entertainment.append(panelsContent);
break;
case 'Health and Beauty':
healthBeauty.append(panelsContent);
break;
case 'Travel':
travel.append(panelsContent);
break;
case 'Electronics':
electronics.append(panelsContent);
break;
case 'Services':
services.append(panelsContent);
break;
case 'Housing':
housing.append(panelsContent);
break;
default:
break;
}
}
},
error: function (data) {
alert('Error: ' + data);
}
}) // End Service Icons  //End Service Icons
}) // End ready function 

这是 HTML 的一部分

<div id="housing" class="accordion-content list-reset leading-normal px-8 py-4 hidden">
<!--Services Content Injected--> 
</div>

这就是我得到的 这就是我得到的

控制台结果

Answer 1

这可能不是最有效的方法，但它应该有效，或者接近。 基本上，由于您的项目列表可以是任何类别，因此您希望在循环遍历时为每个类别构建内容，并且在完成之前不要将该内容附加到手风琴部分。

$(document).ready(function () {
$.ajax({
url: "http://bc-net/_api/web/lists/GetByTitle('specialDiscounts')/items",
method: 'GET',
headers: {
'Accept': 'application/json; odata=verbose'
},
success: function (data) {
var items = data.d.results;
console.log(items);
var auto = $('#automotive');
var entertainment = $('#entertainment');
var healthBeauty = $('#healthBeauty');
var travel = $('#travel');
var electronics = $('#electronics');
var services = $('#services');
var housing = $('#housing');
var autoContent = $('<div class="row animated fadeInUp"></div>');
var entertainmentContent = $('<div class="row animated fadeInUp"></div>');
var healthBeautyContent = $('<div class="row animated fadeInUp"></div>');
var travelContent = $('<div class="row animated fadeInUp"></div>');
var electronicsContent = $('<div class="row animated fadeInUp"></div>');
var servicesContent = $('<div class="row animated fadeInUp"></div>');
var housingContent = $('<div class="row animated fadeInUp"></div>');

var itemContent;
for (var j = 0; j < items.length; j++) {
itemContent = '<div class="col-md-3">' +
'<div class="card-body card-body-cascade text-center">' +
'<a href=" ' + items[j].Link.Url + '" target = _blank> <h4 class="card-title my-4"><strong>' + items[j].Title +
'</strong></h4></a><p class="card-text">' + items[j].Description + '</p></div></div>';
// branching logic,
// append the <p> in different places based on
// different possible Category values
switch (items[j].Category) {
case 'Automotive':
autoContent.append(itemContent);
break;
case 'Entertainment':
entertainmentContent.append(itemContent);
break;
case 'Health and Beauty':
healthBeautyContent.append(itemContent);
break;
case 'Travel':
travelContent.append(itemContent);
break;
case 'Electronics':
electronicsContent.append(itemContent);
break;
case 'Services':
servicesContent.append(itemContent);
break;
case 'Housing':
housingContent.append(itemContent);
break;
default:
break;
}
}
auto.append(autoContent);
entertainment.append(entertainmentContent);
healthBeauty.append(healthBeautyContent);
travel.append(travelContent);
electronics.append(electronicsContent);
services.append(servicesContent);
housing.append(housingContent);
},
error: function (data) {
alert('Error: ' + data);
}
}); // End Service Icons  //End Service Icons
}); // End ready function