Question

如何在纯JavaScript中按属性选择并相应设置结果的innerHTML？

const texts = [
    {id: 'id01', text='Content 01'},
    {id: 'id02', text='Content 02'}
]

<div data-my-id="id01"></div>
<div data-my-id="id02"></div>

最终结果应为：

<div data-my-id="id01">Content 01</div>
<div data-my-id="id02">Content 02</div>

编辑：：忘了：由于存在数百个（可能是数千个）项，因此无法遍历数组。有没有办法遍历querySelector结果并相应地设置文本？

Answer 1

您可以使用函数forEach遍历数组，并使用函数querySelector([data-my-id="specific id"])选择元素并设置所需的文本。

请改用属性textContent，因为您只需要设置文本即可。

const texts = [
    {id: 'id01', text:'Content 01'},
    {id: 'id02', text:'Content 02'}
]

texts.forEach(({id, text}) => document.querySelector(`[data-my-id="${id}"]`).textContent=text);

<div data-my-id="id01"></div>
<div data-my-id="id02"></div>

Answer 2

您需要遍历每个文本。找到具有该属性的元素，然后更改其内部html。

编辑：我添加了loadHtmlAsyc函数，以免减慢页面加载速度。这样做的副作用是内容可能会“随机”加载，即不会在下一行之后加载一行。但是您可以加载数千个项目，而不必等待每一行都呈现。

const texts = [
  {id: 'id01', text: 'Content 01'},
  {id: 'id02', text: 'Content 02'}
];

for (i = 0; i < texts.length; i++) {
  let id = texts[i].id;
  let text = texts[i].text;
  let target = document.querySelector(`[data-my-id="${id}"]`);

  loadHtmlAsyc(target, text);
}

function loadHtmlAsyc(ele, html) {
  setTimeout(function() {
    ele.innerHTML += html;
  }, 0);
}

Answer 3

如您所言，阵列上可能有很多记录。我建议您将这种特殊情况的查询转换为类似的内容：

const texts = [
    {"id": "id01", "text":"Content 013"},
    {"id": "id02", "text":"Content 024"}
]

document.querySelectorAll('[data-my-id]').forEach(function(e) {
  e.innerHTML = texts.find(function(g){
    return g.id == e.getAttribute('data-my-id')}).text
})

<div data-my-id="id01">Content 01</div>
<div data-my-id="id02">Content 02</div>

按属性选择，相应地设置innerHTML

3 个答案: