带有 AJAX 的 JQuery 需要用多维数组创建手风琴

Posted 2023-05-08

【中文标题】带有 AJAX 的 JQuery 需要用多维数组创建手风琴

【英文标题】：JQuery with AJAX need to create accordion with multidimensional array

【发布时间】：2021-08-26 16:40:44

【问题描述】：

我有一个返回这个数组的 AJAX：

"MBA" 0 → ["class_name": "1st Year", "class_code": "552"],
       1 →  ["class_name": "2nd Year", "class_code": "992"]
     ,
"MCA" 0 → ["class_name": "Year 1", "class_code": "112"],
       1 →  ["class_name": "Year 2", "class_code": "446"]
     

Array Preview in Console.Log

在我的 html 中，我有一个手风琴：

<div class="accordion append-ajax-data" id="accordion-4" role="tablist">

</div>

在 AJAX 成功函数中，我得到了数组。我需要将该数组附加到手风琴中，应该是这样的：

<div class="accordion accordion-solid-header" id="accordion-4" role="tablist">
    <div class="card">
      <div class="card-header" role="tab">
        <h6 class="mb-0">
          <a data-toggle="collapse" href="#collapse-counter-1" aria-expanded="true" aria-controls="collapse-counter-1"> Department Name MBA </a>
        </h6>
      </div>
      <div id="collapse-counter-1" class="collapse show" role="tabpanel" aria-labelledby="heading-counter-1" data-parent="#accordion-4">
        <div class="card-body">
          <div class="row">
            <table> 
               <thead>
                  <tr> 
                     <th>Class Name </th>
                     <th> Class Code </th>
                  </tr>
               </thead>
               <thead>
                  <tr> 
                     <th>class_name 1st Year </th>
                     <th>class_code 552 </th>
                  </tr>
                   <tr> 
                     <th>class_name 2nd Year</th>
                     <th>class_code 992 </th>
                  </tr>
               </thead>
          </div>
        </div>
      </div>
     <!-- Another Accordion for MCA Class with table having class names-->
    </div>

在我的 AJAX 成功函数中，我可以循环遍历，但我不知道如何将具有“append-ajax-data”类的 div 附加到手风琴（具有“card”类的 div）。

这是我来自 AJAX 成功函数的 javascript。

groupedByDept = 
"MBA" 0 → ["class_name": "1st Year", "class_code": "552"],
       1 →  ["class_name": "2nd Year", "class_code": "992"]
     ,
"MCA" 0 → ["class_name": "Year 1", "class_code": "112"],
       1 →  ["class_name": "Year 2", "class_code": "446"]
     
;

$.each(groupedByDept, function (dept, classArr) 
                    //console.log("Department IS: "+ dept+ " Class IS :" +classArr);
                    var appendString;
                    for(var i = 0; i < classArr.length; i++) 
                        
                       // console.log('Class Name : '+ classArr[i].class_name);
                        var secArr = classArr[i]['section'];

                        $(".academics-department-class-grid").append(
                            '<div class="card"><div class="card-header" role="tab" id="class-id-'+classArr[i]['class_id']+'"><h6 class="mb-0"> <a data-toggle="collapse" href="#collapse-'+classArr[i]['class_id']+'" aria-expanded="true" aria-controls="collapse-'+classArr[i]['class_id']+'">'+dept+'</a></h6></div><div id="collapse-'+classArr[i]['class_id']+'" class="collapse show" role="tabpanel" aria-labelledby="class-id-'+classArr[i]['class_id']+'" data-parent="#accordion-4"><div class="card-body"><div class="row"><div class="col-12"><table class="table" style="border:none"><thead><tr><th> Class ID</th><th> Class Name</th><th> Class Code</th><th> Actions</th></tr></thead><tbody><tr><td> '+classArr[i]['class_id']+'</td><td> '+classArr[i]['class_name']+'</td><td> '+classArr[i]['class_code']+'</td><td> <a href="#" class=""> <i class="mdi mdi-pencil"></i></a> <a href="#" class=""> <i class="mdi mdi mdi-view-list"></i> </a></td></tr></tbody></table></div></div></div></div></div>'
                        );
                    
                    
                );

但是这段代码为每个班级提供了单独的手风琴，我需要按部门分组，我尝试了很多，请任何人帮忙。

【参考方案1】：

问题是您在 foreach 循环中添加了整张卡片。 尝试在循环之外获取卡片声明，然后关闭它，然后将其添加到容器中，如下所示：

// Open the card to add before the main loop.
var card = '<div class="card">';

$.each(groupedByDept, function (dept, classArr) 
    var appendString;
    for(var i = 0; i < classArr.length; i++) 
        
        var secArr = classArr[i]['section'];

        // add each accordion to the card declared outside
        card += '<div class="card-header" role="tab" id="class-id-'+classArr[i]['class_id']+'"><h6 class="mb-0"> <a data-toggle="collapse" href="#collapse-'+classArr[i]['class_id']+'" aria-expanded="true" aria-controls="collapse-'+classArr[i]['class_id']+'">'+dept+'</a></h6></div><div id="collapse-'+classArr[i]['class_id']+'" class="collapse show" role="tabpanel" aria-labelledby="class-id-'+classArr[i]['class_id']+'" data-parent="#accordion-4"><div class="card-body"><div class="row"><div class="col-12"><table class="table" style="border:none"><thead><tr><th> Class ID</th><th> Class Name</th><th> Class Code</th><th> Actions</th></tr></thead><tbody><tr><td> '+classArr[i]['class_id']+'</td><td> '+classArr[i]['class_name']+'</td><td> '+classArr[i]['class_code']+'</td><td> <a href="#" class=""> <i class="mdi mdi-pencil"></i></a> <a href="#" class=""> <i class="mdi mdi mdi-view-list"></i> </a></td></tr></tbody></table></div></div></div></div>'
    
    
);

// close the card element
card += '</div>';

// now add it to the container
$(".academics-department-class-grid").append(card);

【讨论】：

非常感谢，这确实有效。你节省了很多时间，我用谷歌搜索了很多但昨天无法弄清楚，现在问题已经解决了。非常感谢。