带有嵌套循环的jQuery附加

时间：2019-06-25 09:59:53

标签： 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一样简单

2 个答案:

答案 0 :(得分：0)

使用.join("")数组上的sub_points将<li>元素连接在一起。通过输出不带${item.sub_points}的{​​{1}}，它将自动用逗号连接这些值-等效于使用join。

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

答案 1 :(得分：0)

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

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

  2. 当心'，“，`等-它们应该总是成对出现：）

const 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>'

    ]
  },
];

// only append finalized HTML string
$('#check_list_items').append(appendHtml(check_list_items))

function appendHtml(list) {
  // create the final HTML string in JS,
  // before appending it
  let html = ''
  list.forEach(item => {
    html += createHtml(item)
  })

  return html

}

function createHtml(item) {

  let html = ''

  html += `<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.join('')}
        </ul>
      </div>
    </div>`

  return html

}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="check_list_items"></div>

相关问题
最新问题