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

Question

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

附上所需的最终结果。 Accordion Desired Result

$(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>

这就是我得到的 This is what I am getting

Console Results

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