仅当子容器具有内容时,如何将类添加到特定的父元素
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