如何将 li 元素追加到另一个列表

Question

我有一个列表，我想在某些条件下附加另一个列表。

结构如下：

<ul class="menu"></ul>
<li class="list-1"><ul class="ul-1"</ul></li>
<li class="list-2"><ul class="ul-2"</ul></li>
<li class="list-3"><ul class="ul-3"</ul></li>
<li class="list-4 empty-list"></li>
<li class="list-5"><ul class="ul-5"</ul></li>
</ul>

我想要 list-4 空列表，位于它之前的列表中。所以在这种情况下，在 list-3 内，如果列表为空。我已经检查了列表是否为空，这就是为什么 list-4 有一个名为empty-list 的类。

可以用javascript完成吗？我在研究解决方案时遇到了麻烦，也是因为我不能 100% 确定如何描述它。

谢谢

我尝试过这样的事情：

document.addEventListener('DOMContentLoaded', function () {
    var listItems = document.querySelectorAll('.list');

    listItems.forEach(function (listItem, index) {
      var nextSibling = listItem.nextElementSibling;

      if (nextSibling && nextSibling.classList.contains('list-')) {
        var emptyList = listItem.querySelector('.empty-list');

        if (emptyList) {
          nextSibling.appendChild(emptyList);
        }
      }
    });
  });

我对这种编码还是新手，所以尽力了。

Answer 1

<ul class="menu">
<li class="list-1"><ul class="ul-1"></ul></li>
<li class="list-2"><ul class="ul-2a"></ul></li>
<li class="list-3"><ul class="ul-3"></ul></li>
<li class="list-4 empty-list"></li>
<li class="list-5"><ul class="ul-5"></ul></li>
</ul>

Answer 2

看来您的尝试走在正确的轨道上。但是，您的代码中有几个问题需要解决。 让我们纠正它们：

1.您的查询选择器 .list 应该是 .menu > li，因为您的目标是直接位于 .menu 下的

元素。

2.在您的 if 条件中，您正在检查 nextSibling.classList.contains('list-')。相反，您应该检查空列表类。

这是您的 JavaScript 代码的更正版本：

enter code here
document.addEventListener('DOMContentLoaded', function () {
var listItems = document.querySelectorAll('.menu > li');

listItems.forEach(function (listItem, index) {
    var nextSibling = listItem.nextElementSibling;

    if (nextSibling && nextSibling.classList.contains('empty-list')) {
        listItem.appendChild(nextSibling);
    }
});

});

此代码将移动前一个列表项内的任何空列表（通过空列表类的存在来标识）。确保您的 HTML 结构正确并且符合您的 JavaScript 逻辑。