带嵌套循环的jquery追加_Jquery

带嵌套循环的jquery追加

jquery

带嵌套循环的jquery追加,jquery,Jquery,我试图循环这个数组，但它没有给我正确的输出这是我的阵列 var check_list_items = [ { main_point: 'Engagement', sub_points:[ '<li class="list-group-item ">engagement sub point 1</li>', '<li class="list-group-item ">engagement sub point 2</li

我试图循环这个数组，但它没有给我正确的输出

这是我的阵列

var check_list_items = [
  {
    main_point: 'Engagement',
    sub_points:[
    '<li class="list-group-item ">engagement sub point 1</li>',
    '<li class="list-group-item ">engagement sub point 2</li>',
    '<li class="list-group-item ">engagement sub point 3</li>',
    '<li class="list-group-item ">engagement sub point 4</li>',
    '<li class="list-group-item ">engagement sub point 5</li>',
    '<li class="list-group-item ">engagement sub point 6</li>'
    ]
  },
  {
    main_point: 'Case Review',
    sub_points:[
    '<li class="list-group-item ">Case Review sub point 1</li>',
    '<li class="list-group-item ">Case Review sub point 2</li>',
    '<li class="list-group-item ">Case Review sub point 3</li>',
    '<li class="list-group-item ">Case Review sub point 4</li>',
    '<li class="list-group-item ">Case Review sub point 5</li>'
    ]
  },
  {
    main_point: 'ADR',
    sub_points:[
    '<li class="list-group-item ">ADR sub point 1</li>',
    '<li class="list-group-item ">ADR sub point 2</li>',
    '<li class="list-group-item ">ADR sub point 3</li>',
    '<li class="list-group-item ">ADR sub point 4</li>',
    '<li class="list-group-item ">ADR sub point 5</li>'
    ]
  },
  {
    main_point: 'ADR-VAT Tribunal Appeal ',
    sub_points:[
    '<li class="list-group-item ">ADR-VAT Tribunal Appeal  sub point 1</li>',
    '<li class="list-group-item ">ADR-VAT Tribunal Appeal  sub point 2</li>',
    '<li class="list-group-item ">ADR-VAT Tribunal Appeal  sub point 3</li>',
    '<li class="list-group-item ">ADR-VAT Tribunal Appeal  sub point 4</li>',
    '<li class="list-group-item ">ADR-VAT Tribunal Appeal  sub point 5</li>',
    '<li class="list-group-item ">ADR-VAT Tribunal Appeal  sub point 6</li>'

    ]
  },
  {
    main_point: 'Tribunal',
    sub_points:[
    '<li class="list-group-item ">Tribunal sub point 1</li>',
    '<li class="list-group-item ">Tribunal sub point 2</li>',
    '<li class="list-group-item ">Tribunal sub point 3</li>',
    '<li class="list-group-item ">Tribunal sub point 4</li>',
    '<li class="list-group-item ">Tribunal sub point 5</li>'

    ]
  },
  {
    main_point: 'Finalisation',
    sub_points:[
    '<li class="list-group-item ">Finalisation sub point 1</li>',
    '<li class="list-group-item ">Finalisation sub point 2</li>',
    '<li class="list-group-item ">Finalisation sub point 3</li>',
    '<li class="list-group-item ">Finalisation sub point 4</li>',
    '<li class="list-group-item ">Finalisation sub point 5</li>',
    '<li class="list-group-item ">Finalisation sub point 6</li>'

    ]
  },
  ];

var检查列表项目=[
{
要点：“接触”，
次级要点：[
“参与子点1”，
“参与子点2”，
“约定子点3”，
“约定子点4”，
“约定子点5”，
“约定子点6”
]
},
{
要点：“案例审查”，
次级要点：[
“案例审查第1分点”，
“
案例审查第2分点”，
“
案例评审第3分点”，
“
案例审查第4分点”，
“
案例审查第5分点”
]
},
{
要点：“ADR”，
次级要点：[
“
ADR子点1”，
“ADR子点2”，
“ADR子点3”，
“ADR子点4”，
“ADR子点5”
]
},
{
要点：“ADR-VAT法庭上诉”，
次级要点：[
“ADR-VAT仲裁庭上诉第1分点”，
“
ADR-VAT仲裁庭上诉分点2”，
“ADR-VAT仲裁庭上诉第3分点”，
“
ADR-VAT仲裁庭上诉第4分点”，
“
ADR-VAT仲裁庭上诉第5分点”，
“
ADR-VAT仲裁庭上诉第6分点”
]
},
{
要点：“法庭”，
次级要点：[
“
法庭第1分点”，
“
仲裁庭第2分点”，
“
法庭第3分点”，
“
仲裁庭第4分点”，
“
法庭第5分点”
]
},
{
要点：“最终定稿”，
次级要点：[
“
最终确定子点1”，
“最终确定子点2”，
“最终确定子点3”，
“最终确定子点4”，
“最终确定子点5”，
“最终确定子点6”
]
},
];

这是我使用jquery的循环 //现在循环浏览这些项目并显示它们

  $.each(check_list_items,function (index, item) {
    $('#check_list_items').append(`
      <div class="col-6">
        <img src="<?php echo base_url('assets/images/folder_icons/tick.png'); ?>" class="tick-icon" alt="">
        <div class="tick-empty"></div>
        <div class="card step6_card" >
          <div class="card-header step6_header1" >
            ${item.main_point}
          </div>
          <ul class="list-group list-group-flush">
            ${item.sub_points }
          </ul>
        </div>
      </div>
      );
  });

$。每个（检查列表项目、功能（索引、项目）{
$（“#检查_列表_项目”）。追加(`
“class=”勾选图标“alt=”“>
${item.main_point}

${item.sub_points}

);
});

我希望jquery嵌套循环应该像vue js一样简单

使用

.join（“”

在

sub\u points

数组上，将

元素连接在一起。通过输出

${item.sub\u points}

而不使用

join

它将自动用逗号连接值，相当于使用

.join（“，”）

工作小提琴：

您应该对代码进行一些修改：

在添加HTML字符串之前，尽可能在JS中创建最终的HTML字符串。与向JS字符串添加一些新的子字符串相比，将HTML字符串添加到DOM元素是一个消耗资源的过程

注意“，”，`，等等——它们应该总是成对出现：）

const check\u list\u项目=[{
要点：“接触”，
次级要点：[
“参与子点1”，
“参与子点2”，
“约定子点3”，
“约定子点4”，
“约定子点5”，
“约定子点6”
]
},
{
要点：“案例审查”，
次级要点：[
“案例审查第1分点”，
“
案例审查第2分点”，
“
案例评审第3分点”，
“
案例审查第4分点”，
“
案例审查第5分点”
]
},
{
要点：“ADR”，
次级要点：[
“
ADR子点1”，
“ADR子点2”，
“ADR子点3”，
“ADR子点4”，
“ADR子点5”
]
},
{
要点：“ADR-VAT法庭上诉”，
次级要点：[
“ADR-VAT仲裁庭上诉第1分点”，
“
ADR-VAT仲裁庭上诉分点2”，
“ADR-VAT仲裁庭上诉第3分点”，
“
ADR-VAT仲裁庭上诉第4分点”，
“
ADR-VAT仲裁庭上诉第5分点”，
“
ADR-VAT仲裁庭上诉第6分点”
]
},
{
要点：“法庭”，
次级要点：[
“
法庭第1分点”，
“
仲裁庭第2分点”，
“
法庭第3分点”，
“法庭子点