Ich habe dynamische Divs basierend auf einem Array mit ID erstellt.

NewArray = [parity1,parity2,parity3];

Dafür habe ich ergebnis wie,

<div id="parity1"> </div>
<div id="parity2"> </div>
<div id="parity3"> </div>

Jetzt möchte ich einige dynamische Daten in jedes Div einfügen, dafür muss ich die ID jedes Div abrufen. aber wenn ich versuche, die ID abzurufen, zeigt es nur die letzte Div-ID und speichert alle Daten in der letzten Div.

Schleife zum Erstellen der dynamischen Divs

var tmpList = [];
    for (var j = 0; j < taskInfo[i].tasks.length; j++) {
        var flow = taskInfo[i].tasks[j].parity;
        console.log(flow);
        if (tmpList.indexOf(flow) < 0) { 
            tmpList.push(flow)
          }
    }

    for(var k=0; k < tmpList.length; k++) {
        var par = document.createElement("div");            
        par.setAttribute("id","Parity"+tmpList[k]);
        cont.appendChild(par);
      }

Das Array hat einige wiederholte Werte, sodass die erste Schleife diese Werte entfernt, während die zweite die Div erstellt

0
Logeshps 7 Feb. 2020 im 09:08

3 Antworten

Beste Antwort

Die folgende einfache Schleife hilft mir, dieses Problem zu beheben. Vielen Dank für Ihre Antworten, basierend darauf habe ich diesen Gedanken bekommen.

for(i=0; i < newArray.length; i++;)    
{
var x = document.getElementById("Parity"+newArray[i].parity);
x.appendChild(taskCont);
}
0
Logeshps 10 Feb. 2020 im 07:26

Sie können allen Divs, die Sie auswählen möchten, ein bestimmtes class zuweisen und sie mit document.querySelectorAll('.yourClass') auswählen. Dadurch erhalten Sie eine Liste aller Divs ...

0
marc_s 12 Feb. 2020 im 17:27

Wie andere vorgeschlagen haben, hilft uns die Bereitstellung von mehr Code dabei, ein besseres Bild Ihrer Probleme (sowie des Kontexts) zu erhalten.

In der Zwischenzeit finden Sie unten eine allgemeine Lösung.

const newArray = ['parity1','parity2','parity3'];

//in this basic example, we use a hash map keyed by div id
const someData = {
  "parity1": 'foo',
  "parity2": 'bar',
  "parity3": 47
}

//get data for id
const getData = (id) => someData[id];

//manipulate div in some way
const populateElem = (div, data) => {
  div.innerText = data;
}

//iterate over each id in the array and populate
newArray.forEach(id => {
  const elem = document.getElementById(id);
  const data = getData(id);
  populateElem(elem, data);
});
parity1: <div id="parity1"></div>
parity2: <div id="parity2"></div>
parity3: <div id="parity3"></div>

Einige Ressourcen für Sie:

Array.prototype.forEach ()

HTMLElement.innerText

Beachten Sie auch, dass in JS camelCase normalerweise für Variablennamen verwendet wird (daher die Umbenennung von NewArray in newArray , während PascalCase für Klassendeklarationen verwendet wird.

0
user12335347user12335347 7 Feb. 2020 im 06:46