无法将元素动态插入 Semantic-UI Accordion

Question

我正在尝试在 Semantic-UI Accordion 中插入 动态内容。基本上我必须将 JSON 输入渲染为 html 作为手风琴。

这是我用于上述目的的脚本和 html:-

<script language='javascript'>

  $(document).ready(function(){
  
     $('.ui.accordion').accordion();
     
     $('.ui.accordion').accordion({onOpen: function() { // function for dynamically inserting content inside clicked element in accordion
      var id = $(this).attr('id'); //gets the id of the clicked element in accordion
      var obj = find_key_value(json_data, id); // a function for finding the key in the json and its corresponding value
      for (var prop in obj){ //appends new content inside the clicked element in the accordion
        $(`#${id}`).append(`
        <div class="title">
        <i class="dropdown icon"></i>
          ${prop}
        <div class="content"></div>
        `);
        $('.ui.accordion').accordion('refresh');   
            }
          }
        });
      });
    </script>

<div class="ui styled accordion">
  <div class="title">
    <i class="dropdown icon"></i>
    A
  </div>
  <div class="content" id="A"></div>
  <div class="title">
    <i class="dropdown icon"></i>
    B
  </div>
  <div class="content" id="B"></div>
  <div class="title">
    <i class="dropdown icon"></i>
    C
  </div>
  <div class="content" id="C"></div>
</div>

同样在上面的脚本中，我使用了手风琴的 onOpen 回调，它用于在打开元素后执行一些操作，如 Semantic-UI Docs

假设json_data如下：-

json_data = {
'A' : {
     'A1':{'A12':[]},
     'A2': [],
     'A3': [],
     }, 
'B' :  {
     'B1':[],
     'B2': [],
     'B3': {'B31':[]},
     }, 
'C' : {
     'C1':[]
      }
}

如果单击 A，则 A1、A2、 A3 应该动态插入到 A's 内容中，对于 B 和 C 以及 A1 等嵌套对象也是如此。所以所有元素在json中应该只有当对应的对象键被点击或打开时才被动态插入到手风琴中。

Semantic-UI 上没有太多这方面的文档，我在上面分享的代码不起作用。知道怎么做吗？

[编辑： 这个 JSON 是从 python 字典创建的，所以它可能看起来不像一个普通的 JSON]

Answer 1

obj.forEach((v,i,a)=>{ //appends new content inside the clicked element in the accordion
    $(`${id}`).append(`
        <div class="title">
        <i class="dropdown icon"></i>
          ${a[i]}
        <div class="content"></div>
        `);
        $('.ui.accordion').accordion('refresh');   
})

Answer 2

不必在手风琴打开时创建 htmls，您可以在页面加载时创建整个结构。所以，首先遍历外部数组，即：A , B , C 然后检查里面的数据假设 A 是 object {} 还是 array [] 取决于这个你需要改变你的逻辑并追加整个html 在你的 dom.

里面

演示代码 :

$(document).ready(function() {
  var json_data = {
    'A': [{
      'A1': {
        'A12': ["A12a"],
        'A13': ["A13a"]
      },
      'A2': ["az"],
      'A3': ["a3"],
    }],
    'B': [{
      'B1': ["b1"],
      'B2': ["b2"],
      'B3': {
        'B31': ["b31"]
      },
    }],
    'C': [{
      'C1': ["c1"]
    }]
  }
  var html = "";
  $.each(json_data, function(key, value) {
    //creating title for outer array
    html += `<div class="title">
        <i class="dropdown icon"></i> ${key}
      </div> <div class="content" id="${key}"><div class="accordion">`
    //child inside A,B,C( A1,A2..etc)
    $.each(value[0], function(k, v) {
      html += `<div class="title">
          <i class="dropdown icon"></i>
         ${k}
      </div>`
      //check if the value of object is {} or []
      if (Object.prototype.toString.call(v) === '[object Object]') {
        html += `<div class="content"><div class="accordion">`
        //i.e : A1 { A12 , A13}
        for (var i = 0; i < Object.keys(v).length; i++) {
          html += `<div class="title">
          <i class="dropdown icon"></i>
         ${Object.keys(v)[i]}</div>`
          //loop through i.e : A12 :[""]
          $.each(v[Object.keys(v)[i]], function(ky, vl) {
            html += `<div class="content">${vl}</div>`
          })
        }
        html += `</div></div>`
      } else if (Object.prototype.toString.call(v) === '[object Array]') {
        //simply get content []
        html += `<div class="content">`
        $.each(v, function(ky, vl) {
          html += `${vl}`
        })
        html += `</div>`
      }
    })
    html += `</div></div>`

  })

  $("#outer").html(html) //add to outer div
  $('.ui.accordion').accordion(); //intialzie


});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.4.1/semantic.min.css" integrity="sha512-8bHTC73gkZ7rZ7vpqUQThUDhqcNFyYi2xgDgPDHc+GXVGHXq+xPjynxIopALmOPqzo9JZj0k6OqqewdGO3EsrQ==" crossorigin="anonymous" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.4.1/semantic.min.js" integrity="sha512-dqw6X88iGgZlTsONxZK9ePmJEFrmHwpuMrsUChjAw1mRUhUITE5QU9pkcSox+ynfLhL15Sv2al5A0LVyDCmtUw==" crossorigin="anonymous"></script>
<div class="ui styled accordion" id="outer">
</div>

无法将元素动态插入 Semantic-UI Accordion

Not able to insert elements dynamically into Semantic-UI Accordion

javascript

jquery

json

accordion

semantic-ui