javascript - 使用 jQuery 更新 dom 而不是追加

Question

我有一个关于 jQuery 的问题：我现在将数组中的内容渲染到 dom 中：

errors.forEach(error => {
  let message = error.message;
  let fileName = error.fileName;
  $('.errors').append("<li class=\"error-item\">".concat(fileName, " : ").concat(message, "</li><br>"));
});

但是我得到了一些更新我从中渲染内容的数组的操作，但是当我在更新数组后运行此函数时，它会追加。我现在使用.empty()之前的，但感觉就像是一个黑客，但我希望它更新

我希望这是有道理的

我该怎么做才能更新dom而不是追加？

我希望有人可以帮助我

标签： javascriptjquery

Answer 1

jQuery 方法.html()用给定的htmlString. 以下演示函数logger()将接受一个对象数组并将数据呈现在<ul>.

let failData = [{
    DOM: '.fail',
    title: 'Errors: ',
    header: ['File', 'Message']
  },
  {
    item: '12ffda8a99.log',
    message: 'Connection failed'
  },
  {
    item: 'bb6200c400.log',
    message: 'Corrupted download'
  },
  {
    item: 'd93ba66731.log',
    message: 'Encryption key needed'
  },
  {
    item: '08caa5240f.log',
    message: 'Mismatched certification'
  },
  {
    item: 'dead0b8a99.log',
    message: 'Insecure protocol'
  }
];

let warnData = [{
    DOM: '.warn',
    title: 'Alerts: ',
    header: ['System', 'Message']
  },
  {
    item: 'network',
    message: '1GB of data left before limit is exceeded'
  },
  {
    item: 'file',
    message: '1GB of storage left before partition is full'
  },
  {
    item: 'power',
    message: '5% of battery remains'
  }
];

let infoData = [{
    DOM: '.info',
    title: 'Updates: ',
    header: ['Priority', 'Message']
  },
  {
    item: 'critical',
    message: 'Anti-virus update required'
  },
  {
    item: 'optional',
    message: 'Media encoding update available'
  }
];

const logger = array => {
  let html = '';
  let list;
  for (let [index, object] of array.entries()) {
    list = $(array[0].DOM);
    if (index === 0) {
      list.prev('header').html(`<u><b>${object.title}</b><output>${array.length-1}</output></u><u><b>${object.header[0]}</b><b>${object.header[1]}</b></u>`);
    } else {
      html += `<li><b>${object.item}</b><b>${object.message}</b></li>`;
    }
  }
  list.html(html);
  return false;
}

logger(failData);
logger(warnData);
logger(infoData);

header {
  margin: 10px 0 -15px;
}

ul {
  padding: 5px 0 10px;
  border: 3px ridge #777;
  overflow-y: hidden;
}

ul,
header {
  display: table;
  table-layout: fixed;
  width: 90%;
}

li,
u {
  display: table-row;
}

b {
  display: table-cell;
  width: 50%;
  border-bottom: 1px solid #000;
  padding-left:5px
}

output {
  display: inline-block;
  width: 10ch;
}

<main>
  <section class='logs'>
    <header></header>
    <ul class='fail'></ul>
    <header></header>
    <ul class='warn'></ul>
    <header></header>
    <ul class='info'></ul>
  </section>
</main>

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