cómo recorrer cada lista y agregar un elemento almacenado local en ella

Kinan Alamdar

Tengo una página de marcadores donde agrego, edito y elimino marcadores. y he almacenado estos elementos en localStorage. el problema está en la función loaddata donde obtengo los datos almacenados y los guardo en el li recién creado. la etiqueta li almacena todas las entradas que escribí en una sola lista. puedes verlo aquilo que quiero es que cada marcador debe estar dentro de su propia lista al igual que la función additem. pero no se como lograr esto

const search = document.querySelector('form input');
const input = document.querySelector('.add-text');
const container = document.querySelector('ul');
let items = null;
let currentItem = null;
let array = [];

const searchItems = function(e) {
  if (items) {
    let word = e.target.value.toLowerCase();
    for (let item of items) {
      if (item.firstChild.textContent.toLowerCase().indexOf(word) !== -1) {
        item.style.display = 'block';
      } else {
        item.style.display = 'none';
      }
    }
  }
}

const deleteItem = function(e) {
  currentItem = null;
  e.target.parentNode.remove();
  input.value = '';
}

const editItem = function(e) {
  currentItem = e.target.parentNode.firstChild;
  input.value = currentItem.textContent;
}

const updateItem = function(e) {
  if (currentItem) {
    currentItem.textContent = input.value;
    input.value = '';
  }else{
    alert('No Selected Text Here to Update');
    return;
  }
}

const addItem = function() {
  let val = input.value;
  if (val) {
    let li = document.createElement('li');
    let inner = '<h1 class="text">' + val + '</h1>';
    inner += '<button class="delete">Delete</button>';
    inner += '<button class="edit">Edit</button>';
    array.push(inner);
    let stringified = JSON.stringify(array);
    localStorage.setItem('list', stringified);
    li.innerHTML = inner;
    container.appendChild(li);
    input.value = '';
    currentItem = li.firstChild;  
    items = document.querySelectorAll('li');
    for (let del of document.querySelectorAll('.delete')) {
      del.addEventListener('click', deleteItem);
    }
    for (let edit of document.querySelectorAll('.edit')) {
      edit.addEventListener('click', editItem);
    }
  } else {
      alert('please add some text');
    return;
  }

}


function loaddata(){
    let li = document.createElement('li');
    let stringified = localStorage.getItem('list');
    let listitems = JSON.parse(stringified);
    li.innerHTML = listitems;
    container.appendChild(li);
    console.log(li);
}

loaddata();

search.addEventListener('keyup', searchItems);
document.querySelector('#add').addEventListener('click', addItem);
document.querySelector('#update').addEventListener('click', updateItem);
HynekS

Teniendo en cuenta que su lista es una matriz, debe recorrerla y crear y rellenar elementos dentro de ese ciclo. Intente editar su loaddatafunción de esta manera:

// Mock content

let container = document.body
localStorage.setItem('list', JSON.stringify(['<h1>Foo</h1>', '<h1>Bar</h1>',     '<h1>Baz</h1>']))
loaddata()

// Edited 'loaddata'

function loaddata() {
  let stringified = localStorage.getItem('list');
  console.log(stringified)
  let listitems = JSON.parse(stringified);
  for (let i = 0; i < listitems.length; i++) {
    let li = document.createElement('li');
    li.innerHTML = listitems[i];
    container.appendChild(li);
    console.log(li);
  }
}

No se puede ejecutar como un fragmento de código en la caja de arena de Stack Overflow debido a razones de seguridad (acceder al almacenamiento local), por lo que si desea probarlo, considere copiar a JSFiddle o algo así.

Este artículo se recopila de Internet, indique la fuente cuando se vuelva a imprimir.

En caso de infracción, por favor [email protected] Eliminar

Editado en
0

Déjame decir algunas palabras

0Comentarios
Iniciar sesiónRevisión de participación posterior

Artículos relacionados

¿Cómo recorrer una lista y agregar un elemento a cada tupla en una lista de tuplas usando 'zip ()'?

Cómo recorrer una lista de listas y agregar cada elemento a una nueva lista

Cómo acceder a una matriz bidimensional en prolog y cómo hacer un bucle de cada elemento en ella

¿Recorrer las propiedades y establecer el valor de cada propiedad como un elemento en una lista, imprimir la lista y luego establecer el valor nuevamente? C#

¿Cómo agregar un elemento de lista a cada fila en una serie pandas?

¿Cómo puedo agregar un elemento a cada mapa en una lista de mapas?

¿Cómo puedo agregar un elemento a cada mapa en una lista de mapas?

CSS: ¿Cómo agregar un margen a cada elemento central en una lista?

Pandas: ¿Cómo agregar un personaje al frente de cada elemento en una lista?

¿Cómo agregar un punto antes de cada elemento en esta lista de matriz?

¿Cómo puedo recorrer cada elemento de la lista en cada columna?

¿Cómo cuadro cada elemento en una lista usando agregar?

¿Cómo cuadro cada elemento en una lista usando agregar?

¿Cómo recorrer una matriz json y encontrar una coincidencia para cada elemento en un archivo json más grande?

¿Cómo recorrer cada elemento dentro de una lista de lista en Python?

Usando group_split, agregue un solo valor a cada elemento en una lista para recorrer y acumular

¿Cómo iterar sobre la lista de listas y seleccionar un elemento aleatorio en cada lista?

cómo recorrer cada elemento en la lista e incrementar en uno

cómo recorrer cada elemento en la lista e incrementar en uno

¿Cómo agregar un elemento a una lista en un ViewModel usando Razor y .NET Core?

¿Cómo puedo abrir un archivo y agregar un elemento a una lista existente en Python?

¿Cómo agregar un menú de tres puntos con cada elemento de la lista en la vista de lista?

¿Cómo verificar y agregar de manera eficiente si un elemento no existe en una lista anidada?

append no funciona con lambda y map. ¿Cómo agregar un nuevo elemento en la lista?

Obtener una lista con un elemento almacenado en cada celda después de agregar array.tolist () a una columna en pandas dataframe

cómo separar oraciones y asignar cada oración a un elemento de lista en la plantilla

¿Cómo agregar un separador a cada elemento en ListBox?

R: ¿Cómo agregar una lista a una lista y luego asignar cada lista a una fila en un marco de datos?

¿Cómo recorrer una lista de objetos que tiene una lista del mismo tipo y agregar cada objeto a TreeView?

TOP Lista

CalienteEtiquetas

Archivo