J'ai une liste de tableaux d'objets avec id et valeur comme propriétés. Fondamentalement, ce que je veux, c'est que le num.items[i].value devrait aller dans chaque div comme paire. One: one et ainsi de suite. Si num.items[i].id n'a pas le chiffre (comme le tableau n'inclut pas l'ID 3), alors id="digit_3" doit être laissé vide.
HTML
<ul>
<li>One: <div id="digit_1">s</div></li>
<li>Two: <div id="digit_2">sd</div></li>
<li>Three: <div id="digit_3">sdf</div></li>
<li>Four: <div id="digit_4">sdf</div></li>
</ul>
Javascript
var num = {
items: [
{ id:4, value:"four"},
{ id:1, value:"one"},
{ id:2, value:"two"},
]
};
for(var i=0; i<num.items.length; i++){
document.getElementById("digit_"+i+1).innerHTML = i+1;
console.log(i+1)
}
Sortie requise
One: one
Two: two
Three:
Four: four
Je sais que nous ne pouvons pas comparer le chiffre id mais toute modification en HTML est grandement appréciée.
3 réponses
C'est vraiment simple - il suffit de comprendre les tableaux et les objets:
var num = {
items: [{
id: 4,
value: "four"
},
{
id: 1,
value: "one"
},
{
id: 2,
value: "two"
},
]
};
var cleanableElements = document.querySelectorAll("ul li div");
for (var i = 0; i < cleanableElements.length; i++) {
cleanableElements[i].innerHTML = '';
}
var index;
for (var i = 0; i < num.items.length; i++) {
index = num.items[i].id;
document.getElementById("digit_" + index).innerHTML = num.items[i].value;
}<ul>
<li>One:
<div id="digit_1"></div>
</li>
<li>Two:
<div id="digit_2"></div>
</li>
<li>Three:
<div id="digit_3"></div>
</li>
<li>Four:
<div id="digit_4"></div>
</li>
</ul>La meilleure idée serait de sélectionner tous les éléments avec querySelectorAll et de les définir vides avant l'étape suivante. Vous ne pouvez pas vraiment détecter tous les identifiants #digit_X, vous ne pouvez donc pas simplement vérifier les DIV inchangés car vous ne pouvez pas tous les détecter de manière fiable.
Je sais que j'ai fait quelque chose de maladroit, mais si div a déjà une certaine valeur, l'exemple ci-dessus ne fonctionnera pas, attendez-vous à la réponse de @sphinx, je suppose
var num = {
items: [{
id: 4,
value: "four"
},
{
id: 1,
value: "one"
},
{
id: 2,
value: "two"
},
]
};
var idsArray = [];
var valuesArray = [];
for (var value of num.items) {
idsArray.push(value.id);
valuesArray.push(value.value);
}
var maxId = Math.max(...idsArray);
for (var i = 1; i <= maxId; i++) {
if (idsArray.indexOf(i) !== -1) {
document.getElementById("digit_" + i).innerHTML = valuesArray[idsArray.indexOf(i)];
} else {
document.getElementById("digit_" + i).innerHTML = "";
}
}div {
display: inline
}<ul>
<li>One: <div id="digit_1">s</div></li>
<li>Two: <div id="digit_2">sd</div></li>
<li>Three: <div id="digit_3">sdf</div></li>
<li>Four: <div id="digit_4">sdf</div></li>
</ul>Vous devez boucler ul li div, puis vérifier l'id s'il se trouve dans num.items. En supposant que votre format d'identification est digit_*.
var num = {
items: [
{ id:4, value:"four"},
{ id:1, value:"one"},
{ id:2, value:"two"},
]
}
function checkItems(num){
items = document.querySelectorAll('#target_div li div')
indexes = num.items.reduce( (pre, cur) => {
pre[cur.id] = cur.value
return pre
}, {}) // loop num.items then create one dict with key=id.
items.forEach(function(item){ //loop ul li div, then check whether id in dict=indexes.
let ids = item.id.split('_')
if(ids[1] in indexes){
item.innerHTML += ' @Found:'+item.id
} else {
item.innerHTML = ''
}
})
}
checkItems(num)<ul id="target_div">
<li>One: <div id="digit_1">s</div></li>
<li>Two: <div id="digit_2">sd</div></li>
<li>Three: <div id="digit_3">sdf</div></li>
<li>Four: <div id="digit_4">sdf</div></li>
</ul>