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

Question

希望您能帮助我解决我的问题，我正在使用jquery迭代嵌套的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迭代中，所有的特性数组都在第一次迭代中一起显示。应该在他们自己的迭代中显示出来。

希望你们能明白我的问题。提前谢谢。

Answer 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>

​

Answer 2

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

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>`)
      })
   })   
 });
}