更新HTML从数组索引

-1

键属性我有简单的HTML结构是这样的：更新HTML从数组索引

<ul> 
    <li key="0">Text1</li> 
    <li key="1">Text2</li> 
    <li key="2">Text3</li> 
</ul>

所以每li具有关键属性，它是数组元素（对象）的索引。我想用钥匙删除li。所以我用剪接本：

let keyBook = getAttribute("key"); 
... 
books.splice(keyBook, 1);

和li elems的这个关键属性后并不实际。所以我的问题是：如何在拼接后从数组索引更新密钥？

来源

2017-06-12 Mad Max

我不认为你已经为我们提供了足够的位置。你的例子应该是完整的*（你已经提供了重现问题所需的所有部分）*和可验证的*（你遇到的问题存在于你提供的例子中）*。请查看以下更多信息：[如何创建一个最小，完整和可验证的示例]（https://stackoverflow.com/help/mcve） – Santi

构建该如何呈现自身的组件......

class Keys { 
 
    constructor(data, container) { 
 
    this._data = [].concat(data) 
 
    this.container = container; 
 
    
 
    this.render(); 
 
    } 
 
    
 
    remove(key) { 
 
    this._data = this._data.filter(k => k !== key); 
 
    
 
    return this.render(); 
 
    } 
 
    
 
    add(key) { 
 
    this._data = this._data.concat(key).sort(); 
 
    
 
    return this.render(); 
 
    } 
 
    
 
    render() { 
 
    this 
 
     .container 
 
     .innerHTML = this 
 
     ._data 
 
     .reduce((res, text, index) => (
 
      res.concat(`<li key="${index}">Text ${text}</li>`) 
 
     ), '') 
 
    ; 
 
    
 
    return this; 
 
    } 
 
} 
 

 
var cntr = document.getElementById('ListContainer'); 
 
var data = [1, 2, 3, 4, 5, 6]; 
 
var keys = new Keys(data, cntr); 
 

 
window.setTimeout(() => keys.remove(3), 2000); 
 
window.setTimeout(() => keys.add(67), 3500);

<ul id="ListContainer"></ul>

来源

2017-06-12 15:27:52 Hitmands

是的，我用它来删除li，但问题是在它之后更新密钥。例如：在用键=“1”删除elem后，我想更新数组中的键。并且key =“2”的元素必须是key =“1” –

但不是让所有事情变得复杂，只需要重新渲染所有列表......它会自动绑定到正确的键上。 – Hitmands

更新HTML从数组索引

回答

相关问题