如何在 for 循环 JavaScript 中生成 div 元素 ID答案

【问题标题】：How to generate div element ids in for loop JavaScript如何在 for 循环 JavaScript 中生成 div 元素 ID
【发布时间】：2020-11-25 19:31:48
【问题描述】：

我正在尝试在 JavaScript 或 JQuery 的循环中生成预设数量的 div 元素。目标是必须循环创建这些具有 id 的 div，我可以使用该 id 在程序的另一部分中引用。我知道我不能将连接与 DOM 一起使用。所以，我很难让它执行。我试过用一个文档片段来做这个，但我对它们不是很熟悉。这是我想要完成的一些伪代码：

numCards = 16;

for (var i = 0; i < numCards; i++)
{
     html += '<div id="image' + i + '"><img src="images/desiredImage.png"></div>'
}

同样，我知道这不起作用，因为我不能以这种方式在循环中使用串联。还有哪些其他方法可能对这个问题有用？

【问题讨论】：

把你的html代码附在里面生成元素的地方。
你完全可以像这样在一个循环中连接。如果html 是一个包含字符串的变量。

标签： javascript jquery for-loop

【解决方案1】：

您可以使用innerHTML

numCards = 16;
let html = "";
for (var i = 0; i < numCards; i++)
{
     html += '<div id="image' + i + '"><img src="images/desiredImage.png"></div>'
}

document.getElementById("parent").innerHTML = html;

<div id="parent">
<div>

【讨论】：

我正在使用 jQuery click 函数来尝试记录所点击图像的 id。函数内容为： var thisId = $("#parent : first-child").attr('id');控制台.log(thisId);我不断得到“image0”作为输出。有什么想法吗？
附加你的jquery代码来触发点击功能。仅供参考，#parent:first-child 将始终返回第一个孩子。你到底想要什么？

【解决方案2】：

您正在寻找node.appendChild(myDiv); (appendChild())

所以对于这个循环，我建议：

const numCards = 16;
const parent = document.getElementById('parentDiv');

for (var i = 0; i < numCards; i++)
{
    // using template literals is cleaner
    const div = `<div id="image${i}"><img src="images/desiredImage.png"></div>`
    
    // append the new div to the parent
    parent.appendChild(div);
}

【讨论】：

不鼓励在循环中追加，因为在一般实践中，您希望尽可能少地接触 DOM。最好创建一个文档片段，附加到那个，然后在循环之后将片段附加到 DOM

【解决方案3】：

numCards = 16;

const parent = document.querySelector("#parent")

for (var i = 0; i < numCards; i++)
{
     html += `<div id="image${i}"><img src="images/desiredImage.png"></div>`
     parent.insertAdjacentHTML("afterbegin",html)
}

请注意，我使用的是反引号 `` 和带有美元符号的花括号

反引号替换引号

美元符号表示您想在此处附加一些随机或特殊内容

花括号是特殊内容的容器

【讨论】：

【解决方案4】：

不是定义卡片的长度，而是让 jQuery 来完成工作（实际上这完全取决于您）。这是我的解决方案。

var card_parent = jQuery(document).find('div.card_parent');
    var numCards = card_parent.children('div.numCards').length;
    console.log( numCards + ': total cards'); //this is your number of cards in page

    jQuery('div.numCards').each(function( card_count )
    {
      console.log( 'card ' + card_count + ' id => ' + jQuery(this).attr('id') );
      
      card_count++;
    });

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
    <div class="card_parent"><!-- add a parent that nest the number of cards -->
      <div id="card_1" class="numCards">card 1</div><!--for each class uses a singular class -->
      <div id="card_2" class="numCards">card 2</div>
      <div id="card_3" class="numCards">card  3</div>
      <div id="card_4" class="numCards">card  4</div>
      <div id="card_5" class="numCards">card  5</div>
      <div id="card_6" class="numCards">card  6</div>
      <div id="card_7" class="numCards">card  7</div>
      <div id="card_8" class="numCards">card  8</div>
      <div id="card_9" class="numCards">card  9</div>
      <div id="card_10" class="numCards">card  10</div>
      <div id="card_11" class="numCards">card  11</div>
      <div id="card_12" class="numCards">card  12</div>
      <div id="card_13" class="numCards">card  13</div>
      <div id="card_14" class="numCards">card  14</div>
      <div id="card_15" class="numCards">card  15</div>
      <div id="it_works" class="numCards">card  16</div>
    </div>

【讨论】：

【解决方案5】：

我建议使用函数

const createDiv = (id, textContent) =>
  Object.assign
    ( document.createElement("div")
    , { id, textContent }
    )
    
const items =
  [ { key: "one", value: "bird" }
  , { key: "two", value: "worm" }
  , { key: "three", value: "cat" }
  , { key: "four", value: "mouse" }
  ]
 
const target =
  document.body
  
for (const item of items)
  target.appendChild(createDiv(item.key, item.value))

#one { color: green; }
#two { color: blue; }
#three { color: orange; }
#four { color: red; }

输出

【讨论】：