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

Posted 2023-02-23

【中文标题】仅当子容器具有内容时，如何将类添加到特定的父元素

【英文标题】：How do I add a Class to Specific Parent Elements ONLY if the Child Container has Content

【发布时间】：2021-01-16 13:43:42

【问题描述】：

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

我将动态内容拉入 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>

【参考方案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 元素及其中的类别

【讨论】：

好的，这太棒了:) 我只是想再澄清一点。如果我的光滑幻灯片有多个内部容器怎么办。 只有当 .children 里面没有任何东西或者里面还有另一个 div 也是空的时它才会起作用?

我刚刚对我的问题进行了编辑，以表明它更复杂。这是我简化太多的错

我一直在尝试实现这个，它似乎在抓取我控制台中的所有 div，但它说 [object HTMLDivElement]，你知道这在这种情况下意味着什么吗？