时间戳

首页 > 解决方案 > 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>',
    '<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>'

    ]
  },
  ];

这是我使用 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>
      );
  });

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

标签： jquery

解决方案

.join("")在sub_points数组上使用将<li>元素连接在一起。${item.sub_points}不带它的输出join将自动用逗号连接值——相当于 using .join(",")。

工作小提琴：https ://jsfiddle.net/0on3sphw/

推荐阅读