如何在多个部分中显示单个数组数据--javascript

【问题标题】：how to display single array data in multiple sections --javascript如何在多个部分中显示单个数组数据--javascript
【发布时间】：2020-05-18 19:06:49
【问题描述】：

我有两个部分.. 第 1 部分：- 显示最新的 3，第 2 部分：- 显示所有数据.. 是否可以使用单个数组数据？

let t_p_data = [
    {id: 1,}, {id: 2,}, {id: 3,}, {id: 4,}, {id: 5,},
];
let paymentsData = $('.payments-data');
let paymentsList = paymentsData.innerHTML;
for (let p_data of t_p_data.slice(-3).reverse()) {
    paymentsList += `<tr><td><a href="" target="">${p_data.id}</a></td></tr>  `
}
paymentsData.append(paymentsList);

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table>
    <tbody class="payments-data"><tr><td><h1>Latest Three</h1></td></tr></tbody>
    <tbody class="payments-data"><tr><td><h1>All</h1></td></tr></tbody>
</table>

【问题讨论】：

标签： javascript html jquery arrays

【解决方案1】：

latest 可以切片、反转、映射然后加入，all 只需映射和加入。

您可以使用 jQuery 的 .after() 在第一个 tr 之后直接添加元素。要在最后一个孩子之后添加新内容，请使用 tr:last-child。

const t_p_data = [
  {id: 1,}, {id: 2,}, {id: 3,}, {id: 4,}, {id: 5,},
];

const createItem = ({ id }) =>
  `<tr><td><a href="" target="">${id}</a></td></tr>`;
    

$('.payments-data.latest tr').after(
  t_p_data
    .slice(-3)
    .reverse()
    .map(createItem)
    .join('')
);

$('.payments-data.all tr').after(
  t_p_data
    .map(createItem)
    .join('')
);

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table>
    <tbody class="payments-data latest"><tr><td><h1>Latest Three</h1></td></tr></tbody>
    <tbody class="payments-data all"><tr><td><h1>All</h1></td></tr></tbody>
</table>

【讨论】：