Question

我有一个对象数组列表，其中包含id和value作为其属性。基本上我想要的是，num.items[i].value应该在每个div中作为对。 One: one等等。如果num.items[i].id没有数字（就像数组不包含ID 3那样），那么id="digit_3"应该留空。

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)
}

必需的输出

One: one
Two: two
Three: 
Four: four

我知道我们无法比较id数字，但非常感谢HTML中的任何修改。

Answer 1

它非常简单 - 您只需了解数组和对象：

 FirebaseGetList() animalListHook = new FirebaseGetList(); 
 animalListHook.updateOnce();
 ArrayList<SpottedAnimal> animalList = animalListHook.getList();

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;
}

最好的办法是使用querySelectorAll选择所有元素并在下一步之前设置为空。您无法真正检测到所有#digit_X id，因此您无法检查未更改的DIV，因为您无法可靠地检测到它们。

Answer 2

您应该循环ul li div然后检查ID是否在num.items中。假设您的ID格式为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>

Answer 3

我知道我做了一些尴尬但是如果div已经有了一些价值，那么上面的例子将不起作用期待@sphinx回答我猜

＆＃13;

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 = "";
    }

}

＆＃13;

div {
  display: inline
}

＆＃13;

<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>

＆＃13;

通过匹配对象数组的属性和元素id的数字来附加文本

3 个答案: