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

Posted

技术标签:

【中文标题】仅当子容器具有内容时,如何将类添加到特定的父元素【英文标题】: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],你知道这在这种情况下意味着什么吗?

以上是关于仅当子容器具有内容时,如何将类添加到特定的父元素的主要内容,如果未能解决你的问题,请参考以下文章

仅当元素具有特定子元素时才向元素添加规则

如果li在react功能组件中具有活动类,如何将类添加到父元素ul

DOM中的事件委托

单击使用 v-for 创建的组件时,将类添加到特定的父 div

如何选择包含具有特定src属性的img子元素的父元素

在对象中的 SVG 元素上捕获鼠标事件,也是它的父容器 div