检查容器是否有孩子并附加到那些没有的答案

【问题标题】：Check if containers have children and append to those that don't检查容器是否有孩子并附加到那些没有的
【发布时间】：2021-05-10 20:13:46
【问题描述】：

我正在尝试将图像附加到 8 个容器之一，而无需编写我想要的代码。我希望它能够查看哪些容器是空的并附加到这些容器中。我编写了一些我认为可以工作的东西，但它只附加到第 8 个容器，即使其他 7 个是空的。似乎还有更好的方法来做到这一点

    if (beatcontainer1.firstChild){
        currentbeat = beatcontainer2}
    if (beatcontainer2.firstChild){
        currentbeat = beatcontainer3}
    if (beatcontainer3.firstChild){
        currentbeat = beatcontainer4}
    if (beatcontainer4.firstChild){
        currentbeat = beatcontainer5}
    if (beatcontainer5.firstChild){
        currentbeat = beatcontainer6}
    if (beatcontainer6.firstChild){
        currentbeat = beatcontainer7}
    if (beatcontainer7.firstChild){
        currentbeat = beatcontainer8}
    
currentbeat.appendChild(qnotec)

【问题讨论】：

如果有实际的代码需要批评/测试，这将更容易提供帮助，但如果您在上面的 IF 语句中使用 ELSE 可能会有所帮助。
您可能会考虑一个循环遍历每个容器并附加到空容器。我同意将relevant HTML code 包含在内会有所帮助，以便其他人可以重现该问题。

标签： javascript append containers

【解决方案1】：

我觉得你正在寻找的是一个“if-else”子句。

如果您的第一个 if 子句失败，您只需要检查其他 if 子句。

所以你可以试试这样的。

if (beatcontainer1.firstChild){
    currentbeat = beatcontainer2}
else if (beatcontainer2.firstChild){
    currentbeat = beatcontainer3}
else if (beatcontainer3.firstChild){
    currentbeat = beatcontainer4}
else if (beatcontainer4.firstChild){
    currentbeat = beatcontainer5}
else if (beatcontainer5.firstChild){
    currentbeat = beatcontainer6}
else if (beatcontainer6.firstChild){
    currentbeat = beatcontainer7}
else if (beatcontainer7.firstChild){
    currentbeat = beatcontainer8}

currentbeat.appendChild(qnotec)

这对你有用吗？

【讨论】：

【解决方案2】：

你可以把它们放在一个数组中，然后找到第一个符合你条件的：

const containers = [
  beatcontainer1,
  beatcontainer2,
  beatcontainer3,
  beatcontainer4,
  // ...
]

const matchingContainer = containers.find((container) => container.firstChild)
matchingContainer.appendChild(qnotec)

请注意，我只是复制了您的条件，如果您正在寻找一个空节点，这似乎不是正确的条件。不过这样的事情会做：

const emptyContainer = containers.find((container) => !container.hasChildNodes())

【讨论】：

【解决方案3】：

我正在猜测您的 HTML 的结构，或者可能会根据您的问题推荐一种结构。在这里，我们找到了beatContainers 容器中的所有<div> 元素。当我们遇到一个为空的元素时，我们确保我们尚未附加元素（检查 found） - 然后附加元素，然后将标志 found 设置为 true。

let found = false ;
let qnotec = document.querySelector('.appendme');
 document.querySelectorAll('.beatContainers div').forEach( cell => { 
    if (cell.innerHTML =='' && !found) {
       cell.appendChild(qnotec)
       found=true;
    }
  })

<div class='appendme'>Insert this</div>

<div class='beatContainers'>
<div>something</div>
<div></div>
<div>something</div>
<div>something</div>
</div>

【讨论】：

虽然这段代码 sn-p 可能是一个解决方案，但包括解释有助于提高帖子的质量。考虑到您是在为将来的读者回答问题，而这些人可能不知道您的代码建议的原因。