更新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從數組索引

回答

相關問題