嵌套 jquery $.each 重复迭代问题答案

【问题标题】：nested jquery $.each repeating iteration issue嵌套 jquery $.each 重复迭代问题
【发布时间】：2021-02-03 08:40:22
【问题描述】：

希望您能帮我解决我的问题，我正在使用 jquery $.each 迭代嵌套的 json，这是我的示例代码

function getList() {
 $.getJSON("src/list.json", function(data) {
  $.each(data, function( key, fax ) {
    const faxItem = this;
      displayOnDom.append(`<div id=faxPlan-${faxItem.id} class="pricing-table flex-item ${faxItem.recommended ? 'recommended' : ''}">
        <h3 class="pricing-title">${faxItem.title}</h3>
        <div class="price">${faxItem.price_per_month}<sup>/ month</sup></div>
        ${faxItem.button ? `<p class="rounded">${faxItem.button_text}</p>` : `<p class="norounded">${faxItem.button_text}</p>`}
        <div class="table-list"></div>
        `);
    $.each(fax.features, function( key, list ) {
      $('.table-list').append(`<p>${list.title}<span>${list.list}</span></p>`)
    })
  })   
});

}

我有一个像这样嵌套的包含多个条目的 json 文件。

[{
"id": 1,
"title": "Pay-as-you-go",
"recommended": false,
"price_per_month": "$0.00",
"button": false,
"button_text":"For flexi-fax users, top up as you need with no lock-in contracts",
"icon": true,
"features": [{
        "title": "Send Credits Included",
        "list": "$0.30 Excess send credit charges "
    },
    {
        "title": "Received Credits Included",
        "list": "$0.30 Excess received credit charges "
    },
    {
        "title": "Free Fax Number",
        "list": ""
    }
],
"cta": {
    "label": "TRY FOR FREE",
    "link": "#"
}

我的问题是，在第二次 $.each 迭代中，所有特征数组都在第一次迭代中一起显示。它应该显示在他们自己的迭代中。

希望你们能清楚我的问题。提前致谢。

【问题讨论】：

你能分享你的第二次迭代代码

标签： jquery object

【解决方案1】：

解决此问题的一种快速方法是将:last 添加到 $('.table-list')。

目前的问题是您正在更新每个table-list。

解决方案 1 可能是：$('.table-list:last')

解决方案 1

var displayOnDom = $(".test");

var data = [{
    "id": 1,
    "title": "Pay-as-you-go",
    "recommended": false,
    "price_per_month": "$0.00",
    "button": false,
    "button_text": "For flexi-fax users, top up as you need with no lock-in contracts",
    "icon": true,
    "features": [{
        "title": "Send Credits Included",
        "list": "$0.30 Excess send credit charges "
      },
      {
        "title": "Received Credits Included",
        "list": "$0.30 Excess received credit charges "
      },
      {
        "title": "Free Fax Number",
        "list": ""
      }
    ],
    "cta": {
      "label": "TRY FOR FREE",
      "link": "#"
    }
  },
  {
    "id": 1,
    "title": "Pay-as-you-go",
    "recommended": false,
    "price_per_month": "$0.00",
    "button": false,
    "button_text": "For flexi-fax users, top up as you need with no lock-in contracts",
    "icon": true,
    "features": [{
        "title": "Send Credits Included",
        "list": "$0.30 Excess send credit charges "
      },
      {
        "title": "Received Credits Included",
        "list": "$0.30 Excess received credit charges "
      },
      {
        "title": "Free Fax Number",
        "list": ""
      }
    ],
    "cta": {
      "label": "TRY FOR FREE",
      "link": "#"
    }
  }
]

$.each(data, function(key, fax) {
  const faxItem = this;
  displayOnDom.append(`<div id=faxPlan-${faxItem.id} class="pricing-table flex-item ${faxItem.recommended ? 'recommended' : ''}">
        <h3 class="pricing-title">${faxItem.title}</h3>
        <div class="price">${faxItem.price_per_month}<sup>/ month</sup></div>
        ${faxItem.button ? `<p class="rounded">${faxItem.button_text}</p>` : `<p class="norounded">${faxItem.button_text}</p>`}
        <div class="table-list"></div>
        `);
  $.each(fax.features, function(key, list) {
    $('.table-list:last').append(`<p>${list.title}<span>${list.list}</span></p>`)
  })
})

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

解决方案 2

$.each(data, function(key, fax) {
  const faxItem = this;
  var t = $(`<div id=faxPlan-${faxItem.id} class="pricing-table flex-item ${faxItem.recommended ? 'recommended' : ''}">
        <h3 class="pricing-title">${faxItem.title}</h3>
        <div class="price">${faxItem.price_per_month}<sup>/ month</sup></div>
        ${faxItem.button ? `<p class="rounded">${faxItem.button_text}</p>` : `<p class="norounded">${faxItem.button_text}</p>`}
        <div class="table-list"></div>
        `);
  $.each(fax.features, function(key, list) {
    $(t).find('.table-list').append(`<p>${list.title}<span>${list.list}</span></p>`)
  })
  displayOnDom.append(t);
})

var displayOnDom = $(".test");

var data = [{
    "id": 1,
    "title": "Pay-as-you-go",
    "recommended": false,
    "price_per_month": "$0.00",
    "button": false,
    "button_text": "For flexi-fax users, top up as you need with no lock-in contracts",
    "icon": true,
    "features": [{
        "title": "Send Credits Included",
        "list": "$0.30 Excess send credit charges "
      },
      {
        "title": "Received Credits Included",
        "list": "$0.30 Excess received credit charges "
      },
      {
        "title": "Free Fax Number",
        "list": ""
      }
    ],
    "cta": {
      "label": "TRY FOR FREE",
      "link": "#"
    }
  },
  {
    "id": 1,
    "title": "Pay-as-you-go",
    "recommended": false,
    "price_per_month": "$0.00",
    "button": false,
    "button_text": "For flexi-fax users, top up as you need with no lock-in contracts",
    "icon": true,
    "features": [{
        "title": "Send Credits Included",
        "list": "$0.30 Excess send credit charges "
      },
      {
        "title": "Received Credits Included",
        "list": "$0.30 Excess received credit charges "
      },
      {
        "title": "Free Fax Number",
        "list": ""
      }
    ],
    "cta": {
      "label": "TRY FOR FREE",
      "link": "#"
    }
  }
]

$.each(data, function(key, fax) {
  const faxItem = this;
  var t = $(`<div id=faxPlan-${faxItem.id} class="pricing-table flex-item ${faxItem.recommended ? 'recommended' : ''}">
        <h3 class="pricing-title">${faxItem.title}</h3>
        <div class="price">${faxItem.price_per_month}<sup>/ month</sup></div>
        ${faxItem.button ? `<p class="rounded">${faxItem.button_text}</p>` : `<p class="norounded">${faxItem.button_text}</p>`}
        <div class="table-list"></div>
        `);
  $.each(fax.features, function(key, list) {
    $(t).find('.table-list').append(`<p>${list.title}<span>${list.list}</span></p>`)
  })
  displayOnDom.append(t);
})

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

【讨论】：

太棒了！感谢您指出我的问题！解决方案 2 对我有用，因为我需要在第二个 $.each 之后添加更多 dom 元素。

【解决方案2】：

您可以使用.appendTo（而不是.append）返回新创建的.table-list，以便将其附加到：

function getList() {
 $.getJSON("src/list.json", function(data) {
  $.each(data, function( key, fax ) {
      const faxItem = this;
      displayOnDom.append(`<div id=faxPlan-${faxItem.id} class="pricing-table flex-item ${faxItem.recommended ? 'recommended' : ''}">
        <h3 class="pricing-title">${faxItem.title}</h3>
        <div class="price">${faxItem.price_per_month}<sup>/ month</sup></div>
        ${faxItem.button ? `<p class="rounded">${faxItem.button_text}</p>` : `<p class="norounded">${faxItem.button_text}</p>`}
        `);


      var tablelist = $('<div class="table-list"></div>').appendTo(displayOnDom);

      $.each(fax.features, function( key, list ) {
        tablelist.append(`<p>${list.title}<span>${list.list}</span></p>`)
      })
   })   
 });
}

【讨论】：