仅当子容器具有内容时，如何将类添加到特定的父元素

Question

这可能看起来像一个重复的线程，但它比我读过的要复杂一些。

我将动态内容拉入 vue 光滑轮播，该轮播与另一个轮播链接以充当锚导航（使用 asNavFor）。我链接到的另一个轮播有大量项目（让我们选择 30 个），它们都按类别分开。在我的导航轮播中，我只想为类别提供按钮，而不是每个项目（4 个类别）。我创建的 v-for 仅显示具有 categoryName (v-if="categoryName") 的内容，因此在 30 张幻灯片中动态拉出它仅显示 4 张（太棒了！）。现在，我需要以某种方式隐藏所有空幻灯片，因为我需要保留幻灯片的索引，以便将您带到另一个轮播中的正确幻灯片。

目前我有：

var anchors = document.querySelectorAll('#anchor-inner')
    var anchorIndex = 0
    var length = anchors.length

    for (; anchorIndex < length; anchorIndex++) {
      if (anchors[anchorIndex].innerHTML.length === 0) {
        console.log('here')
      }
    }

这至少会找到其中没有任何内容的幻灯片，但现在我如何只隐藏“空”的幻灯片？我需要隐藏实际的“slick-slide”，甚至设置为零宽度，这样它就不会占用我页面上的空间。这甚至可以做到吗？

编辑 有一个 slick-slide 容器，它添加了一个子 div，然后是我的“anchor-inner”（这是我有我的 v-for 来创建数组的地方），然后是我的锚按钮，只有在它有类别名称。

<VueSlickCarousel class="anchor-carousel">
   <div id="anchor-inner" v-for="(id, index) in updatedArray" :key="index">
      <button id="anchor-button" v-if="id.catTitle">{{id.catTitle}}</button>
   </div>
</VueSlickCarousel>

这是一个动态创建幻灯片后的快速示例

<div class="slick-slide"><div><div class="anchor-inner"><button class="anchor-heading">Category 1</button></div></div></div>
<div class="slick-slide"><div><div class="anchor-inner"></div></div></div>
<div class="slick-slide"><div><div class="anchor-inner"></div></div></div>
<div class="slick-slide"><div><div class="anchor-inner"></div></div></div>
<div class="slick-slide"><div><div class="anchor-inner"><button class="anchor-heading">Category 2</button></div></div></div>
<div class="slick-slide"><div><div class="anchor-inner"></div></div></div>
<div class="slick-slide"><div><div class="anchor-inner"></div></div></div>
<div class="slick-slide"><div><div class="anchor-inner"><button class="anchor-heading">Category 3</button></div></div></div>
<div class="slick-slide"><div><div class="anchor-inner"></div></div></div>
<div class="slick-slide"><div><div class="anchor-inner"></div></div></div>
<div class="slick-slide"><div><div class="anchor-inner"></div></div></div>
<div class="slick-slide"><div><div class="anchor-inner"></div></div></div>
<div class="slick-slide"><div><div class="anchor-inner"><button class="anchor-heading">Category 4</button></div></div></div>
<div class="slick-slide"><div><div class="anchor-inner"></div></div></div>

Answer 1

也许不是最好的解决方案，但我认为你明白了，因为你的代码中有一些问题 :)

var slickSlide = document.querySelectorAll('.slick-slide');

for (var i = 0; i < slickSlide.length; i++) {
  if (slickSlide[i].children.length === 0) {
    slickSlide[i].remove();
  }
}

编辑： 您可以搜索空 div 并将它们删除，直到找不到空的，因为删除空后，下次父级为空。

在这个例子中，我将所有 slick-slide 元素包装到一个 .slide-wrapper 类中

var slickSlide = document.querySelector('.slide-wrapper').getElementsByTagName('div');

function removeAllEmptys() {
    var divCount = slickSlide.length;
    for (var i = 0; i < slickSlide.length; i++) {
    if (slickSlide[i].children.length === 0) {
      slickSlide[i].remove();
    }
  }
  
  if (divCount !== slickSlide.length) {
    removeAllEmptys();
  } else {
    return false;
  }
 
}

removeAllEmptys();

这只会保留 .slick-slide 元素及其中的类别